有一个非常常规的需求，就是一个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中是这样的：

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

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

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