IE6/7/8中Option元素未设value时Select将获取空字符串
IE6/7/8中Option元素未设value时Select将获取空字符串
发布时间:2016-12-30 来源:查字典编辑
摘要:如下复制代码代码如下:IE6/7/8中Option元素未设value时Select将获取空字符串onetwothree当触发change事件...

如下

复制代码 代码如下:

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

相关:

各浏览器中option元素的表现差异

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类