JQuery操作Select的Options的Bug(IE8兼容性視圖模式)

更新時間：2013年04月21日 15:39:56 作者：

JQuery在IE8兼容性視圖模式下操作Select的Options的Bug在本文進行重現(xiàn)并給出詳細的解決方法，感興趣的朋友可以參考下哈，希望對你有所幫助

Bug現(xiàn)場：

通過開發(fā)人員工具查看，下拉列表框是有Options的，但你點擊選擇的時候卻什么也不顯示。

重現(xiàn)步驟：
該問題發(fā)生在級聯(lián)下拉框的情況，第一個列表改變，第二個列表的值跟著改變！
本例中使用以下方法綁定數(shù)據(jù)：

復制代碼代碼如下:

 
//綁定下拉框 
//ctnSelector:下拉框ID，帶#號, 
//jsonData:JSON數(shù)據(jù), 
//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 += "<option value='" + jsonData[jitem][valField] + "'>" + jsonData[jitem][txtField] + "</option>"; 
} 
} 
$(ctnSelector).html(optList); 
} 

正常加載時不會出現(xiàn)任何問題！
但當因第一個下拉框的值改變，而第二個下拉框的選項都被清空了，
然后你還是去點第二個下拉框試圖去選擇一項后，
再去更改第一個下拉框的選項，
你會發(fā)現(xiàn)之前第二個下拉框中顯示的與第一個下拉框對應的項卻怎么也顯示不出來了，
只能顯示第一個，或是通過腳本設置為選中的一個！

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

復制代碼代碼如下:

 
//綁定下拉框 
//ctnSelector:下拉框ID，帶#號, 
//jsonData:JSON數(shù)據(jù), 
//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]; 
sel.options.add(newOption); 
} 
} 
} 