IE6の選択からオプションを削除する
-
10-07-2019 - |
質問
ドロップダウンメニューを再作成しようとしています。 myListを取得するためにajax呼び出しを行っています。新しいリストを作成したら、select要素からすべてのオプションを削除し、新しい値(約100個のオプション)を挿入します。これは、IEおよびFirefoxの以降のバージョンでうまく機能します。更新はほとんど瞬時に行われます。ただし、IE6では、これらの操作によりブラウザーの速度が本当に低下します。ドロップダウンボックスは、オプションが削除されるとほとんどアニメーション化され、これが数秒間続きます。古いリストを新しいリストと比較し、変更されたアイテムのみを削除/追加する以外に、これを高速化する方法はありますか?
$("#myselect").children.remove();
$.each(myList, function(i, val) {
$("<option>").attr("value", val.myID)
.text(val.myText)
.appendTo("#myselect");
});
解決
新しい要素を作成してそれを切り替えるとどうなりますか?
var newSelect = $("<select></select>");
$.each(myList, function(i, val) {
$("<option>").attr("value", val.myID)
.text(val.myText)
.appendTo(newSelect);
});
$("#myselect").replaceWith(newSelect);
他のヒント
コードは非常に優れていますが、遅すぎる場合は、直接ルートに進みます(jQueryを使用する前に過去に実行したことがあり、IE6を含むすべてのブラウザーで即座に実行されました)。 htmlを削除して、選択からすべての子を削除します。
$("#myselect").html('');
各オプションのhtmlを作成するようにループを変更し、使用してselectに挿入します
$('#myselect').html(optionsHTML);
パフォーマンスに応じて、このソリューションとkarim79のソリューションの中間点を試すことができます(つまり、html()でオプションを削除し、プレーンHTMLを作成する代わりに配列を使用してオプションを追加します)。
所属していません StackOverflow