Jquery - 基于组合框的过滤器列表框 [英] Jquery - Filter list box based on the combobox
问题描述
我有两个列表一个显示汽车公司,第二个显示所有的汽车
I have two lists one displays cars company and the second one displays all the cars
这是第一个comboxbox(第一个选项是全部)
Here is the first comboxbox ( The first option is ALL)
<select id="company">
<option selected="true" >ALL</option>
<option>GM</option>
<option>Honda</option>
<option>Ford</option>
</select>
这里是我的第二个lisbox
here is my second lisbox
<select id="names" multiple="multiple" size="8">
<option>Chevy [GM]</option>
<option>Buick [GM]</option>
<option>Civic [Honda]</option>
<option>Accord [Honda]</option>
<option>Focus [Ford]</option>
</select>
根据第一个combox选择,我应该只显示第二个列表中的汽车公司汽车。甚至第二个列表在汽车公司名称在括号中。这是固定的格式。再次从第一个列表,如果用户选择所有,我应该显示所有的车辆。
Based on the first combox selection , I should display only that car company cars in the second list . Even the second list has the car company name in brackets .. This is fixed format . Again from the the first list if user selects "ALL" I should show all the vehicles .
任何机构可以给我一个想法实现这个或代码片段吗?
Could any body give me an idea to implement this or code snippet for this ?
感谢您的帮助
回馈
Kiran
推荐答案
不是所有的浏览器都允许你隐藏下拉列表中的单个项目,所以你需要保留一个master列表,然后根据这些重新填充。
Not all browsers allow you to hide the individual items in a drop-down list, so you need to keep a master list, and then repopulate based on that.
var names = $('#names option').clone();
$('#company').change(function() {
var val = $(this).val();
$('#names').empty();
names.filter(function(idx, el) {
return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0;
}).appendTo('#names');
});
http://jsfiddle.net/alnitak/WsHvS/
这篇关于Jquery - 基于组合框的过滤器列表框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!