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

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

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

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

<div id="box">
    <select id='s'>
         <option value="0">請(qǐng)選擇</option>
    </select>
</div>
<button type="button" onclick="get();">插入html</button>
<script type="text/javascript">
function get(){
   var html='<option value="0">選項(xiàng)一</option>';
   html+='<option value="1">選項(xiàng)二</option>';
   alert(html);
   document.getElementById('s').innerHTML=html;
}
</script>

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

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

而我們就算再I(mǎi)E9及以下瀏覽器，alert以下html變量，顯然是正常的，如下圖：

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