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

.hide()jQueryの関数は、CSSdisplay: noneルールを適用することで機能します。<option>この規則は要素には適用されません。

.detach()代わりに関数を使用することをお勧めします。これにより、要素を DOM から削除できますが、後で を使用して元に戻すこともできます.appendTo()。

関数を呼び出す前search(val)に、ボックス内のすべての要素の配列を作成し<select>ます。次に、各要素をループして、非表示にする要素を切り離します。

于 2013-08-15T14:58:20.280 に答える