Select のオプションを操作する JQuery のバグ (IE8 互換表示モード)_jquery

バグシーン:

開発者ツールから見ると、ドロップダウン リスト ボックスにはオプションがありますが、クリックして選択しても何も表示されません。

再現手順 :
この問題は、最初のリストが変更されると、それに応じて 2 番目のリストの値も変更されます。
この例では、次のメソッドを使用してデータをバインドします:

コードをコピー コードは次のとおりです:

//ドロップダウン ボックスをバインド
//ctnSelector: ドロップダウン ボックス ID、# 付き、
//jsonData: JSON データ、
//txtField: テキスト フィールド名,
//valField: 値フィールド名、
//strOptions: デフォルトで追加される項目
function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions) {
if ($(ctnSelector). length == 0) { return false };
$(ctnSelector).html('');
if (typeof (jsonData) != 未定義) {
for (var jitem in jsonData) {
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") {
continue; .Base.js。
}
optList = "" jsonData[jitem][txtField] ""; >}
$(ctnSelector).html(optList);
}


正常に読み込む場合は問題ありません。
しかし、最初のドロップダウン ボックスの値が変更され、2 番目のドロップダウン ボックスのオプションがクリアされるため、

それでも 2 番目のドロップダウン ボックスをクリックして項目を選択しようとします。
最初のドロップダウン ボックスのオプションを変更します。
最初のドロップダウン ボックスに対応する 2 番目のドロップダウン ボックスに以前表示されていた項目は表示できないことがわかります。最初のもののみが表示されるか、スクリプト経由で選択されたものに設定されます。


解決策
:
DOM メソッドを使用してオプションを操作します。コードは次のとおりです:


コードをコピー

コードは次のとおりです: //ドロップダウン ボックスをバインド//ctnSelector: ドロップダウン ボックス ID、# 付き、

//jsonData : JSON データ、

//txtField: テキストフィールド名、
//valField: 値フィールド名、
//strOptions: デフォルトで追加される項目
関数 InitSelectOptions(ctnSelector, jsonData, txtField, valField , strOptions) {
if ($(ctnSelector).length == 0) { return false };
$(ctnSelector).empty(); 0);
var newOpt = $(strOptions);
var newOption1 = document.createElement("OPTION");
newOption1.value = newOpt .val();
sel.options.add(newOption1);
if (typeof (jsonData) != 未定義) {
for (var jitem in jsonData) {
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") { //flareJ.Base.js によって引き起こされる問題を解決します。
}
var newOption = document.createElement("OPTION");
newOption.text = jsonData[jitem][txtField];
newOption.value = jsonData[jitem][valField]; 🎜>sel.options.add(newOption);
}
}
}