filtraggio dei dati in base a un attributo di dati personalizzato utilizzando jquery

Question

Mi chiedevo se qualcuno potrebbe aiutare con qualche codice jquery per fare quanto segue. Ho un elenco a discesa di selezione dell'elenco che vorrei filtrare un elenco di checkbox.

Ecco ciò che il mio codice html sembra

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

Quindi, se si seleziona Township (05), quindi solo i div con i dati-custom-type = "05" verranno visualizzati.

C'è un modo per raggiungere questo obiettivo e, se sì qualche aiuto sarebbe molto apprezzato

Answer 1

Ecco uno jsFiddle test.

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

Se si seleziona "All", vengono visualizzate tutte le opzioni, in caso contrario vengono visualizzati solo gli elementi corrispondenti.

Answer 2

Prova questa

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

Answer 3

Si potrebbe fare qualcosa di simile:

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

Il codice di cui sopra maniglie l'evento change dell'elemento <select> facendo corrispondere gli elementi <div> che sono figli diretti del principaleElemento, nascondendoli tutti, quindi applicando filter() per ottenere i figli i cui attributi data-custom-type corrispondano al valore selezionato e mostrandoli.