IE6/7/8中Option元素未設value時Select將獲取空字串
如下
<!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
的實現有一定道理。即當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 : [空字串,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>
與上一步相比,第二個option
的two
兩邊加了空格。這次我們alert
出value
的長度。選擇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
中先取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
做的更好。
相關文章
- jquery獲取select下拉選中option項的value值jQuery
- jQuery - remove select option based on text not valuejQueryREM
- JavaScript 獲取select下拉選單所有optionJavaScript
- js獲取select下拉選單的所有option項JS
- javascript獲取所有表單元素的value值JavaScript
- JQuery 獲取select被選中的value和textjQuery
- js獲取select下拉選單中option項的數目JS
- 使用jQuery獲取iframe元素的value屬性值jQuery
- js獲取select下拉選單的value和文字值JS
- jQuery獲取元素內部元素和獲取內容的區別、獲得輸入框value的方法jQuery
- javascript如何獲取當前選中的option項的文字和value值JavaScript
- 獲取選中select下拉選單的value屬性值
- javascript獲取select下拉選單框的value和text值JavaScript
- jQuery實現的獲取select下拉選單的text和value值jQuery
- jquery實現的獲取select下拉選單value和文字內容jQuery
- jQuery將不再支援IE6/7/8jQuery
- jQuery使用val()方法設定或者獲取value值jQuery
- JavaScript select新增optionJavaScript
- js獲取元素的方法(獲取html元素的方法)JSHTML
- JavaScript select valueJavaScript
- php 根據給定字串時間獲取時區PHP字串
- js 操作select和optionJS
- js獲取select的值JS
- request.getParameter("name")什麼時候獲取的引數是null,什麼時候為""空字串Null字串
- JS 獲取文件元素JS
- jquery獲取子元素jQuery
- JavaScript獲取選中checkbox valueJavaScript
- Java獲取Object中Value的方法JavaObject
- 設定和獲取元素固有屬性值
- Jquery如何獲取和設定元素內容?jQuery
- jquery設定和獲取元素的屬性jQuery
- jQuery獲取元素前面所有兄弟元素jQuery
- JQuery 對 Select option 的操作jQuery
- JavaScript獲取指定元素的同輩元素JavaScript
- 獲取ul元素下的所有li元素
- JavaScript獲取父元素下子元素節點JavaScript
- 遞迴遍歷物件獲取value值遞迴物件
- jquery獲取元素節點jQuery