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í),各瀏覽器中測試結(jié)果如下:
IE6/7/8 : 彈出空字符串
IE9/Firefox/Safari/Chrome/Opera : 彈出對應(yīng)的option元素的innerText值。
很明顯,IE9/Firefox/Safari/Chrome/Opera 的實(shí)現(xiàn)有一定道理。即當(dāng)option的value和option的innerText相同時(shí)可以省略掉其value不寫。這樣更簡潔。可惜 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í)測試步驟如下
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 中對于沒有value屬性的option返回空字符串,其length自然是0。這次測試關(guān)注的主要是IE9/Firefox/Safari/Chrome/Opera 這些現(xiàn)代瀏覽器。它們中返回的都是3卻不是5??梢钥吹竭@些瀏覽器內(nèi)部將two兩邊的空白符去掉了(trim)。
上一個(gè)測試已經(jīng)提到了IE9/Firefox/Safari/Chrome/Opera中先取option的value,value屬性沒有再取option的innerText值。對于沒有設(shè)置value屬性的option,它們努力將其innerText作為value返回,甚至?xí)詣尤サ魞蛇叺目瞻追?br>
以上一直提到返回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會發(fā)現(xiàn)仍然是3,而不是“<span>two</span>”的長度16。
可以看到當(dāng)忘記寫option的value時(shí)這些現(xiàn)代瀏覽器都會盡量返回正確的(客戶端程序員想要的)結(jié)果value,其容錯性比IE6/7/8做的更好。
相關(guān):
各瀏覽器中option元素的表現(xiàn)差異
相關(guān)文章
微信小程序?qū)崿F(xiàn)列表?xiàng)l件篩選
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表?xiàng)l件篩選,篩選框的效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07加載遠(yuǎn)程圖片時(shí),經(jīng)常因?yàn)榫彺娑貌坏礁碌慕鉀Q方法(分享)
本篇文章是對加載遠(yuǎn)程圖片時(shí),經(jīng)常因?yàn)榫彺娑貌坏礁碌慕鉀Q方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06js實(shí)現(xiàn)簡單模態(tài)窗口,背景灰顯
昨天中午做項(xiàng)目需要一個(gè)模態(tài)窗口,想起上一個(gè)公司的項(xiàng)目經(jīng)理曾經(jīng)做過一個(gè)比較牛的模態(tài)窗口,至今沒用搞清楚實(shí)現(xiàn)原理,平時(shí)也沒有時(shí)間去分析,試著自己做了一個(gè),用了一天的時(shí)間終于完成了,給大家一起分享, 也希望高手多提意見。第一次在博客園上發(fā)文章,挺高興的。2008-11-11javascript設(shè)計(jì)模式 – 適配器模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 適配器模式,結(jié)合實(shí)例形式分析了javascript適配器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css【推薦】
這篇文章主要介紹了js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css的實(shí)例代碼,非常不錯,具有一定的參考借鑒借鑒價(jià)值,需要的朋友可以參考下2018-06-06js跳轉(zhuǎn)頁面方法實(shí)現(xiàn)匯總
js跳轉(zhuǎn)頁面的方法有很多,本文搜集整理了一些,個(gè)人感覺還不錯,希望對大家有所幫助2014-02-02JavaScript中Function與Object的關(guān)系
本文主要介紹了JavaScript中Function與Object的關(guān)系,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05