select 对象的innerHTML在ie下少一个option 解决方法

最新推荐文章于 2021-08-06 12:25:43 发布

原创最新推荐文章于 2021-08-06 12:25:43 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie

javascript技术专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在Internet Explorer浏览器中动态生成下拉选择框（select元素）时遇到的问题及解决方案。通过将select元素放置在一个span标签内并利用JavaScript动态修改其innerHTML属性的方法，可以有效解决IE下select元素子项不显示的问题。

<select name="xinghao" id="xinghao"> </select> xinghao += '<option>请选择型号</option>'; for(var i=0; i<result.length; i++) { xinghao += '<option value="' + result[i].id + '">' + result[i].name + '</option>'; } xinghao += '</option>'; document.getElementById('xinghao').innerHTML=xinghao;

这么做在ff下完全可以，在ie下会显示不出来，研究源代码一看竟然前面的<option>没有了。

解决方法

<span id="xinghaospan"> </span> var xinghao = '<select name="xinghao">'; xinghao += '<option>请选择型号</option>'; for(var i=0; i<result.length; i++) { xinghao += '<option value="' + result[i].id + '">' + result[i].name + '</option>'; } xinghao += '</option>'; document.getElementById('xinghaospan').innerHTML=xinghao;