微构网络

IE10以下浏览器下原生js插入select的option的BUG

2016-07-14 14:14 栏目:技术教程 查看(1,115)

有一个非常常规的需求,就是一个select多级联动框,比如我们最常见的城市选择,一般有省->市->县等多级,通俗讲称之为多级联动,我记得在当初看jquery书籍的时候这个应用是一个典型案例。而今天说的这个问题下恰恰是这个相关的问题,只不过是讲原生的。

问题是这样出现的,一个原生JavaScript写的一个多级联动模块,有省市县三级,默认程序循环出所有的省,当用户选择一个省份的时候触发一个方法,这个方法就是通过ajax请求这个省份下市级地区的数据,返回来的是html格式,就是返回一组option,这个看似没什么问题;但突然用IE9打开发现返回的东西是没有的,也就是空的。

这个基本问题就是昨天有人问我的一个问题,我开始以为他的ajax兼容性有问题,没考虑IE的兼容。结果我发现并不是这样,因为使用IE10及以上版本是没问题的,跟Chrome和其他非IE内核浏览器一样都是正常的。然后在出问题的浏览器下方法发现其实请求过来的并不是空的,而是有数据的,但插入节点后,option标签消失,仅仅留下了文本。

为了清晰看到这个问题,现在我把它精简为一个非常简单的模型,不用ajax,仅仅在一个节点上插入数据,源代码如下:

<div id="box">
    <select id='s'>
         <option value="0">请选择</option>
    </select>
</div>
<button type="button" onclick="get();">插入html</button>
<script type="text/javascript">
function get(){
   var html='<option value="0">选项一</option>';
   html+='<option value="1">选项二</option>';
   alert(html);
   document.getElementById('s').innerHTML=html;
}
</script>

点击按钮执行get方法后,在Chrome中是这样的:

345

而在IE9及以下浏览器我们看到的是这样的:

255

而我们就算再IE9及以下浏览器,alert以下html变量,显然是正常的,如下图:

3444444444444

实际上就是因为在插入节点的时候由于并没有select,于是IE浏览器干脆把option也给弄没了,另外使用jquery的html()方法是不会出现这样的问题。最快捷的解决方法,就是在插入的变量中带上select,比如上面的实例可以把select加到html,然后不是插入给s,而是插入到box对应的div节点即可解决该问题;当然可能有更加优雅的解决方案,比如jquery中其实已经解决该问题了。

转载请注明出处:IE10以下浏览器下原生js插入select的option的BUG - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)