Jquery - 基于组合框过滤列表框

Question

我有两个列表显示汽车公司,第二个显示所有汽车

这是第一个comboxbox(第一个选项是ALL)

<select id="company">
     <option selected="true" >ALL</option>
    <option>GM</option>
    <option>Honda</option>
    <option>Ford</option>
</select>

这是我的第二个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选择,我应该只显示第二个列表中的汽车公司汽车.即使是第二个列表也有括号中的汽车公司名称.这是固定格式.再次从第一个列表中,如果用户选择"全部",我应该显示所有车辆.

任何机构都可以给我一个实现这个或代码片段的想法吗？

谢谢你的帮助

问候

基兰

Answer 1

并非所有浏览器都允许您隐藏下拉列表中的各个项目,因此您需要保留主列表,然后根据该列表重新填充.

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/的工作演示