如下
<!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
做的更好。