有一個非常常規(guī)的需求，就是一個select多級聯(lián)動框，比如我們最常見的城市選擇，一般有省->市->縣等多級，通俗講稱之為多級聯(lián)動，我記得在當(dāng)初看jquery書籍的時候這個應(yīng)用是一個典型案例。而今天說的這個問題下恰恰是這個相關(guān)的問題，只不過是講原生的。

問題是這樣出現(xiàn)的，一個原生JavaScript寫的一個多級聯(lián)動模塊，有省市縣三級，默認程序循環(huán)出所有的省，當(dāng)用戶選擇一個省份的時候觸發(fā)一個方法，這個方法就是通過ajax請求這個省份下市級地區(qū)的數(shù)據(jù)，返回來的是html格式，就是返回一組option，這個看似沒什么問題；但突然用IE9打開發(fā)現(xiàn)返回的東西是沒有的，也就是空的。

這個基本問題就是昨天有人問我的一個問題，我開始以為他的ajax兼容性有問題，沒考慮IE的兼容。結(jié)果我發(fā)現(xiàn)并不是這樣，因為使用IE10及以上版本是沒問題的，跟Chrome和其他非IE內(nèi)核瀏覽器一樣都是正常的。然后在出問題的瀏覽器下方法發(fā)現(xiàn)其實請求過來的并不是空的，而是有數(shù)據(jù)的，但插入節(jié)點后，option標(biāo)簽消失，僅僅留下了文本。

為了清晰看到這個問題，現(xiàn)在我把它精簡為一個非常簡單的模型，不用ajax，僅僅在一個節(jié)點上插入數(shù)據(jù),源代碼如下：

<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>

點擊按鈕執(zhí)行g(shù)et方法后，在Chrome中是這樣的：

而在IE9及以下瀏覽器我們看到的是這樣的：

而我們就算再IE9及以下瀏覽器，alert以下html變量，顯然是正常的，如下圖：

實際上就是因為在插入節(jié)點的時候由于并沒有select，于是IE瀏覽器干脆把option也給弄沒了，另外使用jquery的html()方法是不會出現(xiàn)這樣的問題。最快捷的解決方法，就是在插入的變量中帶上select，比如上面的實例可以把select加到html，然后不是插入給s，而是插入到box對應(yīng)的div節(jié)點即可解決該問題；當(dāng)然可能有更加優(yōu)雅的解決方案，比如jquery中其實已經(jīng)解決該問題了。