关于在IE下对Select标签设置innerHTML无效的问题

Posted on 2011-04-16 02:01 IceWee 阅读(381) 评论(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新闻知识库 C++博客博问管理
相关文章: JavaScript删除Array数组指定下标下的元素高仿Google Suggest & Baidu Suggest 使用childNodes获取table对象子节点遇到的问题关于在IE下对Select标签设置innerHTML无效的问题 IE7去掉地址栏，window.close()不提示是否关闭 JS打开窗口最大化，不是满屏，不是初始化窗口宽高，而是和鼠标点击最大化一样的效果

ice world

导航

常用链接

留言簿(8)

随笔分类

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜

关于在IE下对Select标签设置innerHTML无效的问题