中文字幕中文字幕在线中心一区,亚洲欧美资源在线,超碰97在线播放

關于在IE下對Select標簽設置innerHTML無效的問題

Posted on 2011-04-16 02:01 IceWee 閱讀(407) 評論(0) 編輯收藏所屬分類: Javascript

今天在做應用的時候有個級聯菜單的功能，因為一般做開發的時候都是使用FireFox居多（原因不用多說，相信所有的前端開發人員都曾經嘗到了惡心的IE不遵守W3C標準的痛苦），因此想當然的時候對一個Select標簽進行了如下操作： selectObj.innerHTML = '<option value="value">something</option>'

寫完之后興沖沖在FireFox下測試了一下功能，沒問題，覺得OK！第二天有個同事在測試的時候發現在IE下選什么都沒有用，出不來子菜單，告訴我之后，著實把我郁悶了一番。在IE6下看了一把，貌似也沒有報什么腳本錯誤，但就是innerHtML沒有設置成功，因為之前沒有遇到過這個問題，調了很久都沒有找到原因。后來有IE Develop Toolbar看了一下生成之后的HTML結構，發現IE根本沒有按照我規定的格式去渲染select標簽，趕緊在Google上搜了一把，發現這是IE 的一個BUG，微軟的BUG申明中注明了兩種解決方案： 1. 如果您必須使用 innerHTML ，一種替代方法是使用一個 div 對象封裝 SELECT 元素和然后設置 div 對象的 innerHTML 屬性。例如：

<html>

<head>

<title>My Example</title>

<!--

var origDivHTML;

function init() {

origDivHTML = myDiv.innerHTML;

}

function setValues() {

var oldinnerHTML = "your original innerHTML: " + yourDiv.innerHTML;

alert(oldinnerHTML);

yourDiv.innerHTML = origDivHTML;

var curinnerHTML = "your current innerHTML: " + yourDiv.innerHTML;

alert(curinnerHTML);}

//-->

</script>

</head>

</select>

</div>

</select>

</div>

<button onclick="setValues();">click me to set the values</button>

</body>

</html>

2. 理想情況下，應使用選項(Option) 集合添加為 SELECT 元素的選項。下面的代碼顯示用編程方式將選項添加到 SELECT 元素的三種方法。例如：

<html>

<head>

<title>Example</title>

<!--

function fill_select1() {

for ( var i = 0; i < 100; i++) {

select1.options[i] = new Option(i, i);

}

function fill_select2() {

var sOpts = "<select>";

for ( var i = 0; i < 100; i++) {

sOpts += '<option value="' + i + '">' + i + '</option>';

}

select2.outerHTML = sOpts + "</option>";

}

function fill_select3() {

for ( var i = 0; i < 100; i++) {

var oOption = document.createElement("OPTION");

oOption.text = "Option: " + i;

oOption.value = i;

document.all.select3.add(oOption)

}

//-->

</script>

</head>

<body>

<h2>SELECT Box Population</h2>

</body>

</html>

雖然這個BUG在GOOGLE上已經有不少人發表了看法，我還是覺得應該自己去寫下來，總結加深印象，希望能給有需要的朋友提供幫助，少走一些彎路。

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/grubbyfan/archive/2009/01/09/3743344.aspx

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JavaScript刪除Array數組指定下標下的元素高仿Google Suggest & Baidu Suggest 使用childNodes獲取table對象子節點遇到的問題關于在IE下對Select標簽設置innerHTML無效的問題 IE7去掉地址欄，window.close()不提示是否關閉 JS打開窗口最大化，不是滿屏，不是初始化窗口寬高，而是和鼠標點擊最大化一樣的效果

ice world

導航

常用鏈接

留言簿(8)

隨筆分類

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜

關于在IE下對Select標簽設置innerHTML無效的問題