0

コンテンツをフィルタリングする2つのドロップダウンリストがあります。最初のものは場所であり、2番目のものは仕事です。最初のリストは2番目のリストをフィルタリングします。：containsを使用して、フィルターが機能することを可能にする文字列値を読み取ります。2つのコンテインメントを一度にフィルターとして使用したいときに問題が発生します。コードは次のとおりです。

HTML

<div class="holder">
<label for="volunteerLocation">Where do you want to volunteer?</label><br>
<select id="locations">
    <option value="0">--Select a Campus--</option>
    <option value="5">Location 1</option>
    <option value="6">Location 2</option>
    <option value="7">Location 3</option>
</select>
</div>

<br />

<div class="holder">
<label for="volunteerJobs">In which area would you like to serve?</label><br />
<select id="jobs">
    <option value="1">Job 1 (Location 1)</option>
    <option value="2">Job 2 (Location 2)</option>
    <option value="3">Job 3 (Location 3)</option>
    <option value="4">Job 4 (All locations)</option>
</select>
</div>

Javascript

var select = $('#jobs');
var options = [];
$(select).find('option').each(function () {
    options.push({ value: $(this).val(), text: $(this).text() });
});
$(select).data('options', options);

$('#locations').change(function () {
    filterText = $("#locations option:selected").text();
    var optionList = $(select).empty().data('options');
    var j = 0;

    $.each(optionList, function (i) {
        var option = options[i];
        if (option.text.indexOf(filterText) !== -1) {
            if (j == 0) {
                $('#jobs').prepend("<option value=''>--Select a Job--</option>").val('');
                j++;
            };
            $(select).append(
                $('<option>').text(option.text).val(option.value)
            );
        }

        if (filterText == "--Select a Campus--") {
            $(select).append(
                $('<option>').text(option.text).val(option.value)
            );
        }
    })
})

これがJSLintであるため、実際の動作を確認できます。完全な例

「キャンパスの選択」オプション以外のすべてに「ジョブ4」を表示させようとしています。それ、どうやったら出来るの？

4

1 に答える 1

0

場所が変更されるたびに.eachでループし、例外を通過する代わりに、ページの読み込み時にインデックスを作成します

var locJobs=new Array();

次に、たとえばデータを入力します

locJobs['5']=new Array();
locJobs['5'] = ['job 1','job 2']

その後、変更時に

$("#jobs").html('<option>'+locJobs[$(this).val()].join('</option><option>')+'</option>');

#jobsのオプションに値を追加する必要がある場合は、そのスニペットを少し複雑にする必要があります。非常に柔軟なソリューションが得られるため、より効率的であり、メンテナンスもはるかに簡単になります（使用しているデータソースからデータを取り込むための配列だけを処理する場合も例外ではありません）。

nb：宣言しますvar select = $("#jobs")が、$（select）;を使用します。selectそれは直接役に立たないオーバーヘッドの使用です

コードを明確に保つための規則は、jqueryオブジェクトをキャッシュしている変数に$を追加することです。

 var $select=$("#select")

その後、あなたは使用します$select.whtever(//...

于 2013-02-08T17:59:10.080 に答える