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

最後更新：2013-10-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

如下
複製代碼代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>IE6/7/8中Option元素未設value時Select將擷取Null 字元串</title>
</head>
<body>
<select onchange="alert(this.value)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</body>
</html>

當觸發change事件時，各瀏覽器中測試結果如下：
IE6/7/8 : 彈出Null 字元串
IE9/Firefox/Safari/Chrome/Opera : 彈出對應的option元素的innerText值。

很明顯，IE9/Firefox/Safari/Chrome/Opera 的實現有一定道理。即當option的value和option的innerText相同時可以省略掉其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 : [Null 字元串，1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]

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

IE6/7/8中，如果option沒有value值，那麼將返回Null 字元串。
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。這時各瀏覽器中彈出結果如下
IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera : 3

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

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

以上一直提到返回option的innerText，卻不是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。

可以看到當忘記寫option的value時這些現代瀏覽器都會盡量返回正確的（用戶端程式員想要的）結果value，其容錯性比IE6/7/8做的更好。

相關：
各瀏覽器中option元素的表現差異

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More