Filter a list (ul>li) using dropdown list

Question

I have this code below that filters a list based off a selected radio button ( JSfiddle ).

How do I change it, so I can use a drop down list to filter it ( select>option tags) ?

<input name="name" value="_a" id="_a" type="radio"/><label for="_a">A</label>
<input name="name" value="_b" id="_b" type="radio"/><label for="_f">B</label>
<input name="name" value="_ab" id="_ab" type="radio" checked="checked"/><label for="_ab">A and B</label>
<br>
<select>
    <option value="_a">A</option>
    <option value="_b">B</option>
    <option value="_ab">A and B</option>
</select>

<ul id="mylist">
<li class="_ab _a">A1</li>
<li class="_ab _a">A2</li>
<li class="_ab _b">B1</li>
<li class="_ab _b">B2</li>
</ul>
<script>
$('input').click(function() {
        var selector = $('input:radio').map(function(){ 
            return this.checked ? '.' + this.id : ''; 
        }).get().join('');
        console.log(selector);  

        var all = $('li[class^="_"]');
        if(selector.length)
          all.hide().filter(selector).show();
        else all.show();
    });
</script>

Answer 1

You need to add a listener to the "select" tag. Look into .change() specification.

Answer 2

like this?

$('select').on('change', function (e) {

        var selector = "."+$(this).val();
        console.log(selector); 

        var all = $('li[class^="_"]');
        if(selector.length)
          all.hide().filter(selector).show();
        else all.show();
});

http://jsfiddle.net/8qmjjL3x/3/

Answer 3

$('select').on('change', function (e) {
        var selector = $('option').map(function(){ 
            return this.selected ? '.' + this.value : ''; 
        }).get().join('');
        console.log(selector);  

        var all = $('li[class^="_"]');
        if(selector.length)
          all.hide().filter(selector).show();
        else all.show();
    });