6

誰かが次のことを行うためのjqueryコードを手伝ってくれるかどうか疑問に思いました。チェックボックスのリストをフィルタリングしたいドロップダウン選択リスト入力があります。

これが私のhtmlコードがどのように見えるかです

 <span style="float:right;">

        <label>Filter</label> 
    <select id="office-type-list" name="OfficeTypes"><option value="00">All</option>

        <option value="05">Township</option>

        <option value="10">Municipality</option>

        <option value="15">Elementary School</option>

        <option value="20">High School</option>

    </select> 

</span>

<!-- List below -->

<div name="Offices">
    <div data-custom-type="00">
        <input type="checkbox" name="Offices" id="Offices_0000" value="0000" /> <label for="Offices_0000">All</label>
    </div>
    <div data-custom-type="05">
        <input type="checkbox" name="Offices" id="Offices_0010" value="0010" /> <label for="Offices_0010">Township 1p</label>
    </div>
    <div data-custom-type="05">
        <input type="checkbox" name="Offices" id="Offices_0020" value="0020" /> <label for="Offices_0020">Township 2</label>
    </div>
</div>

したがって、タウンシップが選択されている場合（05）、data-custom-type="05"のdivのみが表示されます。

これを達成する方法はありますか？もしそうなら、いくつかの助けをいただければ幸いです

4

3 に答える 3

7

これがテストするjsFiddleです。

$('#office-type-list').change(function(){
    var sel = $(this).val();
    $('div[name="Offices"] div').hide();
    if(sel != "00"){
       $('div[data-custom-type="'+sel+'"]').show();
    }
    else {
        $('div[name="Offices"] div').show();
    }
});

「すべて」を選択すると、すべてのオプションが表示されます。それ以外の場合は、一致する要素のみが表示されます。

于 2012-01-23T16:36:35.277 に答える
7

あなたは次のようなことをすることができます：

$("#office-type-list").change(function() {
    var customType = $(this).val();
    $("div[name=Offices]").children("div").hide().filter(function() {
        return $(this).data("custom-type") == customType;
    }).show();
});

上記のコードは、メイン要素の直接の子である要素を照合し、それらをすべて非表示にしてから、filter（）を適用して、選択した値と属性が一致する子を取得し、これらを表示することで、要素のchangeイベントを処理します。<select><div>Officesdata-custom-type

于 2012-01-23T16:26:22.200 に答える
4

これを試して

$("#office-type-list").change(function(){
     $("div[data-custom-type]").hide();
     $("div[data-custom-type=" + this.value +"]").show();
});
于 2012-01-23T16:24:09.237 に答える