快捷導(dǎo)航

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

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

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

Bug現(xiàn)場：

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

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

復(fù)制代碼代碼如下:

 
//綁定下拉框 
//ctnSelector:下拉框ID，帶#號, 
//jsonData:JSON數(shù)據(jù), 
//txtField:文本字段名稱, 
//valField:值字段名稱, 
//strOptions:默認(rèn)填加的項(xiàng) 
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導(dǎo)致的問題。 
} 
optList += "<option value='" + jsonData[jitem][valField] + "'>" + jsonData[jitem][txtField] + "</option>"; 
} 
} 
$(ctnSelector).html(optList); 
} 

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

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

復(fù)制代碼代碼如下:

 
//綁定下拉框 
//ctnSelector:下拉框ID，帶#號, 
//jsonData:JSON數(shù)據(jù), 
//txtField:文本字段名稱, 
//valField:值字段名稱, 
//strOptions:默認(rèn)填加的項(xiàng) 
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導(dǎo)致的問題。 
} 
var newOption = document.createElement("OPTION"); 
newOption.text = jsonData[jitem][txtField]; 
newOption.value = jsonData[jitem][valField]; 
sel.options.add(newOption); 
} 
} 
} 