filtering data based on a custom data attribute using jquery
-
12-11-2019 - |
문제
I was wondering if someone could help with with some jquery code for doing the following. I have a drop down select list input that i would like to filter a list of checkboxes.
Here's what my html code looks like
<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>
So if Township is selected (05) then only the divs with the data-custom-type="05" will display.
Is there a way to achieve this and if so some help would be much appreciated
해결책
Here's a jsFiddle to 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();
}
});
If "All" is selected, all the options are displayed, otherwise only the matching elements are displayed.
다른 팁
You could do something like:
$("#office-type-list").change(function() {
var customType = $(this).val();
$("div[name=Offices]").children("div").hide().filter(function() {
return $(this).data("custom-type") == customType;
}).show();
});
The code above handles the change
event of your <select>
element by matching the <div>
elements that are direct children of your main Offices
element, hiding them all, then applying filter() to obtain the children whose data-custom-type
attributes match the selected value, and showing these.
Try this
$("#office-type-list").change(function(){
$("div[data-custom-type]").hide();
$("div[data-custom-type=" + this.value +"]").show();
});