2

我使用 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();
        }
    }
}
4

2 回答 2

3

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

于 2013-08-15T14:56:51.217 回答
1

jQuery 中的.hide()函数通过应用 CSSdisplay: none规则来工作。此规则不适用于<option>元素。

我建议改用该.detach()功能。这允许您从 DOM 中删除一个元素，但它也保留了稍后使用.appendTo().

在调用该函数之前，创建一个包含框中search(val)所有元素的数组。<select>然后，遍历每个元素并分离您想要隐藏的元素。

于 2013-08-15T14:58:20.280 回答