filtrado de datos basado en un atributo de datos personalizado usando jquery

Question

Me preguntaba si alguien podría ayudar con algún código de jquery para hacer lo siguiente. Tengo una entrada de lista de selección desplegable que me gustaría filtrar una lista de casillas de verificación.

Esto es lo que mi código html parece

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

lo tanto, si se selecciona Township (05) entonces sólo los divs con el encargo de tipo de datos = "05" se mostrará.

¿Hay una manera de lograr esto y si es así un poco de ayuda sería muy apreciada

Answer 1

Aquí hay un jsFiddle para probar.

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

Si se selecciona "Todo", se muestran todas las opciones; de lo contrario, solo se muestran los elementos coincidentes.

Answer 2

probar este

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

Answer 3

Se podría hacer algo como:

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

El código anterior mangos el evento change de su elemento <select> haciendo coincidir los elementos <div> que son hijos directos de su principal Offices elemento, ocultándolos a todos, luego aplicando filter() para obtener los elementos secundarios cuyos atributos data-custom-type coincidan con el valor seleccionado y los muestre.