IE6/7/8中Option元素未設(shè)value時(shí)Select將獲取空字符串
<!DOCTYPE HTML>
<html>
<head>
<title>IE6/7/8中Option元素未設(shè)value時(shí)Select將獲取空字符串</title>
</head>
<body>
<select onchange="alert(this.value)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</body>
</html>
當(dāng)觸發(fā)change事件時(shí)，各瀏覽器中測(cè)試結(jié)果如下：
IE6/7/8 : 彈出空字符串
IE9/Firefox/Safari/Chrome/Opera : 彈出對(duì)應(yīng)的option元素的innerText值。
很明顯，IE9/Firefox/Safari/Chrome/Opera 的實(shí)現(xiàn)有一定道理。即當(dāng)option的value和option的innerText相同時(shí)可以省略掉其value不寫。這樣更簡(jiǎn)潔。可惜 IE6/7/8 不支持這么寫。為保證兼容所有瀏覽器，書寫option時(shí)務(wù)必別少了value屬性。
把上面的html代碼稍作修改
<select onchange="alert(this.value)">
<option value="1">one</option>
<option>two</option>
<option>three</option>
</select>
給第一個(gè)option添加了value屬性。這時(shí)測(cè)試步驟如下
1，選擇two
2，選擇one
兩次彈出的結(jié)果如下：
IE6/7/8 : [空字符串，1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]
從結(jié)果上可以看出各瀏覽器的實(shí)現(xiàn)大概如下：
IE6/7/8中，如果option沒有value值，那么將返回空字符串。
IE9/Firefox/Safari/Chrome/Opera 中先取option的value值，如果沒有value屬性，則取option的innerText值。
再修改下代碼
<select onchange="alert(this.value.length)">
<option value="1">one</option>
<option> two </option>
<option>three</option>
</select>
與上一步相比，第二個(gè)option的two兩邊加了空格。這次我們alert出value的長度。選擇two。這時(shí)各瀏覽器中彈出結(jié)果如下
IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera : 3
IE6/7/8 中對(duì)于沒有value屬性的option返回空字符串，其length自然是0。這次測(cè)試關(guān)注的主要是IE9/Firefox/Safari/Chrome/Opera 這些現(xiàn)代瀏覽器。它們中返回的都是3卻不是5?？梢钥吹竭@些瀏覽器內(nèi)部將two兩邊的空白符去掉了（trim）。
上一個(gè)測(cè)試已經(jīng)提到了IE9/Firefox/Safari/Chrome/Opera中先取option的value，value屬性沒有再取option的innerText值。對(duì)于沒有設(shè)置value屬性的option，它們努力將其innerText作為value返回，甚至?xí)詣?dòng)去掉兩邊的空白符。
以上一直提到返回option的innerText，卻不是innerHTML。再修改下代碼
<select onchange="alert(this.value)">
<option value="1">one</option>
<option><span>two</span></option>
<option>three</option>
</select>
第二個(gè)option沒有value屬性，其內(nèi)是個(gè)span元素。這時(shí)選擇two。在IE9/Firefox/Safari/Chrome/Opera中彈出的仍然是“two”，而不是“<span>two</span>”。如果alert出其length會(huì)發(fā)現(xiàn)仍然是3，而不是“<span>two</span>”的長度16。
可以看到當(dāng)忘記寫option的value時(shí)這些現(xiàn)代瀏覽器都會(huì)盡量返回正確的（客戶端程序員想要的）結(jié)果value，其容錯(cuò)性比IE6/7/8做的更好。
相關(guān)：
各瀏覽器中option元素的表現(xiàn)差異
相關(guān)文章
JavaScript設(shè)計(jì)模式之外觀模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之外觀模式實(shí)例,本文用一些代碼實(shí)例來講解JavaScript中的外觀模式,需要的朋友可以參考下2014-10-10
微信小程序?qū)崿F(xiàn)加入購物車滑動(dòng)軌跡
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)加入購物車滑動(dòng)軌跡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
下面小編就為大家?guī)硪黄畔L動(dòng)效果的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
只顯示一次的提示信息，刷新一頁面或第二次來到這個(gè)頁面，就不會(huì)再彈出提示窗口了，用在網(wǎng)頁上是想當(dāng)實(shí)用的吧，因?yàn)楹芏嗳硕疾幌Ｍ?jīng)常彈出什么窗口，本效果因此會(huì)提升用戶體驗(yàn)，讓用戶喜歡你的網(wǎng)頁2013-03-03
js中使用DOM復(fù)制（克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中的代碼
使用DOM復(fù)制（克隆）指定節(jié)點(diǎn)名數(shù)據(jù)到新的XML文件中 ,用到三個(gè)類的相關(guān)知識(shí)點(diǎn) ： DOMDocument - DOMNodeList - DOMNode2011-07-07
基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果，需要的朋友一起學(xué)習(xí)吧2015-09-09
javascript實(shí)現(xiàn)table表格隔行變色的方法
