Javascript jQuery过滤

有没有办法使用jQuery过滤多行选择框

我是jQuery的新手，似乎无法找到最好的方法

例如，如果我有：

<select size="10">
   <option>abc</option>
   <option>acb</option>
   <option>a</option>
   <option>bca</option>
   <option>bac</option>
   <option>cab</option>
   <option>cba</option>
   ...
</select>

abc
acb
A.
bca
美国银行
驾驶室
中国篮球协会
...

我想根据选择下拉列表筛选此列表，包括：

<select>
   <option value="a">Filter by a</option>
   <option value="b">Filter by b</option>
   <option value="c">Filter by c</option>
</select>

过滤
b过滤
用c语言过滤

类似的操作可能会起到作用（假设您给“筛选依据…”选择一个id为Filter，而filtered/other选择一个id为otherOptions）：

更新：正如@Brian Liang在评论中指出的，您可能无法将标记设置为display:none。因此，以下内容应为您提供更好的跨浏览器解决方案：

$(document).ready(function() {
    var allOptions = {};

    $('#otherOptions option').each(function(i) {
        var $currentOption = $(this);
        allOptions[$currentOption.val()] = $currentOption.text();
    });

    $('#filter').change(function() {
        // Reset the filtered select before applying the filter again
        setOptions('#otherOptions', allOptions);
        var selectedFilter = $(this).val();
        var filteredOptions = {};

        $('#otherOptions option').each(function(i) {
            var $currentOption = $(this);

            if ($currentOption.val().indexOf(selectedFilter) === 0) {
                filteredOptions[$currentOption.val()] = $currentOption.text();
            }
        });

        setOptions('#otherOptions', filteredOptions);
    });

    function setOptions(selectId, filteredOptions) {
        var $select = $(selectId);
        $select.html('');

        var options = new Array();
        for (var i in filteredOptions) {
            options.push('<option value="');
            options.push(i);
            options.push('">');
            options.push(filteredOptions[i]);
            options.push('</option>');
        }

        $select.html(options.join(''));
    }

});

$（文档）.ready（函数（）{
var allOptions={}；
$（“#其他选项”）。每个（函数（i）{
var$currentOption=$（此项）；
allOptions[$currentOption.val（）]=$currentOption.text（）；
});
$（'#过滤器'）。更改（函数（）{
//在再次应用过滤器之前，重置过滤选择
设置选项（“#其他选项”，allOptions）；
var selectedFilter=$（this.val（）；
var filteredOptions={}；
$（“#其他选项”）。每个（函数（i）{
var$currentOption=$（此项）；
if（$currentOption.val（）.indexOf（selectedFilter）==0）{
filteredOptions[$currentOption.val（）]=$currentOption.text（）；
}
});
设置选项（“#其他选项”，过滤器选项）；
});
功能设置选项（selectId、filteredOptions）{
变量$select=$（selectId）；
$select.html（“”）；
var options=新数组（）；
用于（过滤器中的变量i）{
选项。推送（“”）；
选项。推送（过滤选项[i]）；
选项。推送（“”）；
}
$select.html（options.join（“”））；
}
});

我认为这不起作用，因为你不能隐藏选项元素。@Brian Liang我在发布之前在Firefox中做了一个快速测试，结果成功了。不过，我刚刚在Opera、Safari、Chrome和IE 8中进行了检查，你是对的：它在那些浏览器中不起作用。干得好，伊恩！

$(document).ready(function() {
    var allOptions = {};

    $('#otherOptions option').each(function(i) {
        var $currentOption = $(this);
        allOptions[$currentOption.val()] = $currentOption.text();
    });

    $('#filter').change(function() {
        // Reset the filtered select before applying the filter again
        setOptions('#otherOptions', allOptions);
        var selectedFilter = $(this).val();
        var filteredOptions = {};

        $('#otherOptions option').each(function(i) {
            var $currentOption = $(this);

            if ($currentOption.val().indexOf(selectedFilter) === 0) {
                filteredOptions[$currentOption.val()] = $currentOption.text();
            }
        });

        setOptions('#otherOptions', filteredOptions);
    });

    function setOptions(selectId, filteredOptions) {
        var $select = $(selectId);
        $select.html('');

        var options = new Array();
        for (var i in filteredOptions) {
            options.push('<option value="');
            options.push(i);
            options.push('">');
            options.push(filteredOptions[i]);
            options.push('</option>');
        }

        $select.html(options.join(''));
    }

});