我使用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()函数对匹配元素的作用)不能以可靠的跨浏览器方式用于选项元素.相反,您需要从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(); });