IE6/7/8中Option元素未設value時Select將獲取空字串

風靈使發表於2018-12-30

如下

<!DOCTYPE HTML>
<html>
<head>
<title>IE6/7/8中Option元素未設value時Select將獲取空字串</title>
</head>
<body>
    <select onchange="alert(this.value)">
        <option>one</option>
        <option>two</option>
        <option>three</option>
    </select>
</body>
</html>

當觸發change事件時,各瀏覽器中測試結果如下:

IE6/7/8 : 彈出空字串
IE9/Firefox/Safari/Chrome/Opera : 彈出對應的option元素的innerText值。

很明顯,IE9/Firefox/Safari/Chrome/Opera 的實現有一定道理。即當optionvalueoptioninnerText相同時可以省略掉其value不寫。這樣更簡潔。可惜 IE6/7/8 不支援這麼寫。為保證相容所有瀏覽器,書寫option時務必別少了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

兩次彈出的結果如下:

IE6/7/8 : [空字串,1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]

從結果上可以看出各瀏覽器的實現大概如下:

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>

與上一步相比,第二個optiontwo兩邊加了空格。這次我們alertvalue的長度。選擇two。這時各瀏覽器中彈出結果如下

IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera : 3

IE6/7/8 中對於沒有value屬性的option返回空字串,其length自然是0。這次測試關注的主要是IE9/Firefox/Safari/Chrome/Opera 這些現代瀏覽器。它們中返回的都是3卻不是5。可以看到這些瀏覽器內部將two兩邊的空白符去掉了(trim)。

上一個測試已經提到了IE9/Firefox/Safari/Chrome/Opera中先取optionvaluevalue屬性沒有再取optioninnerText值。對於沒有設定value屬性的option,它們努力將其innerText作為value返回,甚至會自動去掉兩邊的空白符。

以上一直提到返回optioninnerText,卻不是innerHTML。再修改下程式碼

<select onchange="alert(this.value)">
    <option value="1">one</option>
    <option><span>two</span></option>
    <option>three</option>
</select>

第二個option沒有value屬性,其內是個span元素。這時選擇two。在IE9/Firefox/Safari/Chrome/Opera中彈出的仍然是“two”,而不是“<span>two</span>”。如果alert出其length會發現仍然是3,而不是“<span>two</span>”的長度16

可以看到當忘記寫optionvalue時這些現代瀏覽器都會盡量返回正確的(客戶端程式設計師想要的)結果value,其容錯性比IE6/7/8做的更好。

相關文章