[英]Filter a list (ul>li) using dropdown list
I have this code below that filters a list based off a selected radio button ( JSfiddle ). 我下面有这段代码,用于根据选定的单选按钮( JSfiddle )过滤列表。
How do I change it, so I can use a drop down list to filter it ( select>option tags) ? 如何更改它,以便可以使用下拉列表对其进行过滤(select> option标签)?
<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>
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/ http://jsfiddle.net/8qmjjL3x/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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.