IE中部分版本的浏览器对Select标签设置innerHTML无效的问题
这样写的代码:document.getElementById('data_list').innerHTML = data;//data是ajax返回的数据
结果发现在ie10的兼容模式下面下拉框没有内容,
之后alert调试了一下 发现alert(data)时所有的下拉框的数据都能出来
然后alert调试了alert(document.getElementById('data_list').innerHTML),发现第一个下拉框的数据前面少了一个<option>标签
解决的时候有两种方案:
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>