我使用jquery弹出对话框,在此对话框中,我有输入和选择框,我想在选择框中隐藏一些选项,它在ff中起作用,但在chrome中不起作用。

<input type="text" onkeyup="search(this.value)" >

<select id="cl_sel_l"  multiple="multiple">
   <option value='2' id='c_2'>aa</option>
   <option value='3' id='c_3'>bb</option>
   <option value='4' id='c_4'>cc</option>
   <option value='5' id='c_5'>dd</option>
</select>


var clients = new Array();
clients[2] ='aa';
clients[3] ='bb';
clients[4] ='cc';
clients[5] ='dd';

function search(val) {
    for ( var i in clients) {
        if (clients[i].toLowerCase().search(val.toLowerCase()) == -1) {
            $("#cl_sel_l").find("#c_" + i).hide();
        } else {
            $("#cl_sel_l").find("#c_" + i).show();
        }
    }
}

最佳答案

display: none(这是jQuery的hide()函数对匹配的元素所做的工作)不能以可靠的跨浏览器方式用于option元素。相反,您需要从DOM中删除它们,然后在搜索后将它们重新添加。

这有点棘手,因为您需要存储原始订单。我很想删除不匹配的内容,然后还原。像这样:

var clients = new Array();
clients[2] ='aa';
clients[3] ='bb';
clients[4] ='cc';
clients[5] ='dd';
var restore;

function search(val) {
    $('#cl_sel_l').html(restore);
    for ( var i in clients) {
        if (clients[i].toLowerCase().search(val.toLowerCase()) == -1) {
            $("#c_" + i).remove();
        }
    }
}

$(function() { restore = $('#cl_sel_l').html(); });


看到这个jsFiddle

10-05 20:43
查看更多