Question

我在下面的代码中根据选定的单选按钮（JSfiddle）过滤列表。

如何更改它，以便我可以使用下拉列表对其进行过滤（选择＆gt;选项标记）？

<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

你需要为＆＃34;选择＆＃34;添加一个监听器。标签。查看.change()规范。

Answer 2

像这样？

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

使用下拉列表过滤列表（ul＆gt; li）

3 个答案: