filtering data based on a custom data attribute using jquery

Question

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

first of all data-custom-type should be data-r unless you are using HTML5 only. it might fail on older browsers. second thing, a div cannot have a name, name is only for inputs, change name to id. — Rafael Herscovici
– Rafael Herscovici, Commented Jan 23, 2012 at 16:26
The answer you selected fails for choosing an item and then choosing 'All'. When doing this, only 'All' shows, not all of the original divs/checkboxes. My answer handles that case as well. — j08691
– j08691, Commented Jan 23, 2012 at 17:50
you're absolutely correct. i've gone ahead and updated my accepted answer. thanks. — zSynopsis
– zSynopsis, Commented Jan 23, 2012 at 17:56
actually i was a bit fuzzy on the details because i included all as an option in the list of offices. my bad — zSynopsis
– zSynopsis, Commented Jan 23, 2012 at 18:04
Possible duplicate of Filter element based on .data() key/value — sergdenisov
– sergdenisov, Commented Feb 12, 2016 at 17:46

j08691 · Accepted Answer · 2012-01-23 16:36:35Z

7

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.

answered Jan 23, 2012 at 16:36

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frédéric Hamidi · Accepted Answer · 2012-01-23 16:33:17Z

7

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.

edited Jan 23, 2012 at 16:33

answered Jan 23, 2012 at 16:26

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2012-01-23 16:24:09Z

4

Try this

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

answered Jan 23, 2012 at 16:24

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

filtering data based on a custom data attribute using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related