關於在IE下對Select標籤設定innerHTML無效的問題

阿新 • • 發佈：2019-02-19

今天在做應用的時候有個級聯選單的功能，因為一般做開發的時候都是使用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>
<script language="Javascript">
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>
<body onload=

"init()">
<div id="myDiv">
<select name="firstSelect" size="1">
<option>11111</option>
<option>22222</option>
<option>33333</option>
</select>
</div>
<div id="yourDiv">
<select name="secondSelect" size="1">
<option>aaaa</option>
<option>bbbb</option>
<option>cccc</option>
</select>
</div>
<button onclick="setValues();">click me to set the values</button>
</body>
</html>

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

<html>
<head>
<title></title>
</head>
<body>
<script>
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>
<h2>SELECT Box Population</h2>
<select id=select1 name=select1></select>
<input type="button" value="Populate with options list" id="button1" name="button1"onclick="fill_select1();"><br/><br/>
<select id="select2" name="select2"></select>
<INPUT type="button" value="Populate with outerHTML" id="button2" name="button2"onclick="fill_select2();"><br/><br/>
<select id="select3" name="select3"></select>
<input type="button" value="Populate with using createElement" id="button3"name="button3" onclick="fill_select3();">
</body>
</html>

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

關於在IE下對Select標籤設定innerHTML無效的問題

關於在IE下對Select標籤設定innerHTML無效的問題

獲取多選下拉框（select標籤設定multiple屬性）的值

java後臺為前臺JSP頁面的SELECT標籤設定值

select標籤設定multiple屬性，如何獲取值

Struts2 select標籤設定Class屬性生成的html程式碼中select沒有class屬性問題

解決IE下select innerHTML無效的問題

IE下css設定select的諸多問題

select 標籤預設樣式在火狐和ie瀏覽器上下拉箭頭難看！谷歌ok！在網上找到的解決下拉箭頭的樣式

Jquery form.js文件上傳返回JSON數據,在IE下提示下載文件的解決辦法,並對返回數據進行正確的解析

ie瀏覽器下get方式獲取數據無效問題

select標籤（下拉多選框）

vue對select下拉框賦初值後，不能進行選擇的問題

label和span標籤設定寬度width無效問題的解決方式

原生select下拉html標籤以及預設選中以及清除選中

IE和Firefox下，a標籤使用href=”javascript:void(0);”和target=”_blank”行為不符合預期

【解決】SELECT標籤中OPTION的顯隱控制(相容IE)

關於IE下英文字型跟中文字型不能對齊的根源以及解決辦法

【.Net碼農】WebBrowser與IE的關係，如何設定WebBrowser工作在IE9模式下？

原生js實現對select下拉列表的內容過濾

WebBrowser與IE的關係，如何設定WebBrowser工作在IE9、10、11模式下？

關於在IE下對Select標籤設定innerHTML無效的問題

相關推薦