JQuery操作Select的Options的Bug(IE8相容性檢視模式)_jquery

Bug現場：

透過開發人員工具查看，下拉列錶框是有Options的，但你點擊選擇的時候卻什麼也不顯示。

重現步驟：
這個問題發生在級聯下拉框的情況，第一個清單改變，第二個清單的值跟著改變！
本例中使用下列方法綁定資料：

複製程式碼 程式碼如下:

程式碼如下:



//綁定下拉框
//ctnSelector:下拉框ID，帶#號,
//jsonData:JSON資料,
//txtField:文字欄位名稱,
//valField:值欄位名稱,
//strOptions:預設填加的項目
function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions) {
if ($(ctnSelector).length == 0) { return false; };
$(ctnSelector).html('');
var optList = strOptions;
if (typeof (jsonData) != undefined) {
for (var jitem in jsonData) {
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") {
continue; //解決flareJ.Base.js導致的問題。
}
optList = "" jsonData[jitem][txtField] "";

}
} ";
}
} ";
}
}
$(ctnSelector).html(optList);
}
正常載入時不會出現任何問題！
但當因第一個下拉框的值改變，而第二個下拉框的選項都被清空了，
然後你還是去點第二個下拉框試圖去選擇一項後，

再去更改第一個下拉框的選項， 你會發現之前第二個下拉框中顯示的與第一個下拉框對應的項目卻怎麼也顯示不出來了， 只能顯示第一個，或透過腳本設定為選取的一個！ 解決方案：

使用DOM的方法去操作Options，代碼如下：

複製代碼


程式碼如下:


//綁定下拉框
//ctnSelector:下拉框ID，帶#號,
//jsonData:JSON資料,
//txtField:文字欄位名稱,
//valField:值欄位名稱,
//strOptions:預設填加的項目
function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions) { if ($(ctnSelector).length == 0) { return false; };
$(ctnSelector).empty();
var sel = $(ctnSelector).get(0);
var newOpt = $(strOptions);
var newOption1 = document.createElement("OPTION");
newOption1.text = newOpt.text();
newOption1.value = newOpt.val();
sel.options.add(newOption1);
if (typeof (jsonData) != undefined) {
for (var jitem in jsonData) {
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") {
continue; //解決flareJ.Base.js導致的問題。

} var newOption = document.createElement("OPTION"); newOption.text = jsonData[jitem][txtField]; newOption.value = jsonData[jitem][valField]; newOption.value = jsonData[jitem][valField]; sel.options.add(newOption); } } }