jqueryを使用してカスタムデータ属性に基づいてデータをフィルタリングする

Question

次のことを行うためのjqueryコードで助けてくれる人がいるかどうかは疑問でした。 私はチェックボックスのリストをフィルタリングしたいドロップダウン選択リスト入力を持っています。ここで

は、データ・カスタム・タイプ=「05」を持つ唯一のdivが表示されます（05）郷が選択されている場合は、私の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> 

次のようになります。

これを達成する方法はありそうであれば、いくつかの助けがはるかに

Answer 1

ここには、jsFiddleがあります。

「すべて」を選択すると、すべてのオプションが表示されます。一致しない場合は、すべてのオプションが表示されます。

Answer 2

は、あなたが何か行うことができ、この

$("#office-type-list").change(function(){ 
    $("div[data-custom-type]").hide(); 
    $("div[data-custom-type=" + this.value +"]").show(); 
}); 

Answer 3

を試してみていただければ幸いです。

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

ハンドル上のコードをchangeイベントの<select>要素は、<div>のメインの子要素であるの要素と一致します要素をすべて隠してからfilter()を適用して、data-custom-typeの属性が選択した値と一致する子を取得し、これらを表示します。