IE6/7/8中Option元素未設(shè)value時Select將獲取空字符串
如下
<!DOCTYPE HTML> <html> <head> <title>IE6/7/8中Option元素未設(shè)value時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事件時，各瀏覽器中測試結(jié)果如下：
IE6/7/8 : 彈出空字符串
IE9/Firefox/Safari/Chrome/Opera : 彈出對應(yīng)的option元素的innerText值。
很明顯，IE9/Firefox/Safari/Chrome/Opera 的實現(xiàn)有一定道理。即當(dāng)option的value和option的innerText相同時可以省略掉其value不寫。這樣更簡潔。可惜 IE6/7/8 不支持這么寫。為保證兼容所有瀏覽器，書寫option時務(wù)必別少了value屬性。
把上面的html代碼稍作修改
<select onchange="alert(this.value)"> <option value="1">one</option> <option>two</option> <option>three</option> </select>
給第一個option添加了value屬性。這時測試步驟如下
1，選擇two
2，選擇one
兩次彈出的結(jié)果如下：
IE6/7/8 : [空字符串，1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]
從結(jié)果上可以看出各瀏覽器的實現(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>
與上一步相比，第二個option的two兩邊加了空格。這次我們alert出value的長度。選擇two。這時各瀏覽器中彈出結(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）。
上一個測試已經(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>
第二個option沒有value屬性，其內(nèi)是個span元素。這時選擇two。在IE9/Firefox/Safari/Chrome/Opera中彈出的仍然是“two”，而不是“<span>two</span>”。如果alert出其length會發(fā)現(xiàn)仍然是3，而不是“<span>two</span>”的長度16。
可以看到當(dāng)忘記寫option的value時這些現(xiàn)代瀏覽器都會盡量返回正確的（客戶端程序員想要的）結(jié)果value，其容錯性比IE6/7/8做的更好。
相關(guān)：
浙公網(wǎng)安備 33010602011771號