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

Question

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

这是第一个组合框(第一个选项是全部)

<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>

根据第一个组合框选择，我应该仅在第二个列表中显示该汽车公司的汽车。甚至第二个列表也将汽车公司名称放在括号中。这是固定格式。再次从第一个列表中，如果用户选择“全部”，我应该显示所有车辆。

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

感谢您的帮助

问候

基兰

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/