filtrowanie danych na podstawie niestandardowego atrybutu danych przy użyciu jquery

Question

Zastanawiam się, czy ktoś może pomóc przy użyciu kodu jquery do wykonywania następujących czynności. Mam listę rozwijaną listy wyboru, które chciałbym filtrować listę pól wyboru.

Oto co mój kod html wygląda

<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> 

Więc jeśli jest wybrana Township (05), a następnie tylko z DIV-niestandardowego typu danych z = „05” będą wyświetlane.

Czy istnieje sposób, aby osiągnąć ten cel, a jeśli tak, niektóre pomoc będzie bardzo mile widziane

Answer 1

Oto test do przetestowania.

$('#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(); 
    } 
}); 

Jeśli wybrana jest opcja „All”, wyświetlane są wszystkie opcje, w przeciwnym razie tylko elementy pasujące są wyświetlane.

Answer 2

Spróbuj

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

Answer 3

Można zrobić coś takiego:

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

powyższy kod uchwytami zdarzenie change elementu <select>, dopasowując elementy <div>, które są bezpośrednimi potomkami głównego użytkownika Offices element, ukrywając je wszystkie, a następnie podając filter(), aby uzyskać dzieci, których atrybuty data-custom-type pasują do wybranej wartości i wyświetlając je.