IE6/7/8中Option元素未设value时Select将获取空字符串
更新时间：2011年04月07日 22:53:31 作者：
可以看到当忘记写option的value时这些现代浏览器都会尽量返回正确的（客户端程序员想要的）结果value，其容错性比IE6/7/8做的更好。
如下
<!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>
<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>
<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元素的表现差异
复制代码 代码如下:
<!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元素的表现差异
相关文章
这篇文章主要为大家详细介绍了微信小程序实现列表条件筛选，筛选框的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要分享了canvas实现雪花效果的核心代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
本文给大家分享的是基于JavaScript的setCapture方法实现的拖动效果，非常的简单实用，有需要的小伙伴可以参考下2016-09-09
本篇文章是对加载远程图片时,经常因为缓存而得不到更新的解决方法进行了详细的分析介绍，需要的朋友参考下2013-06-06
昨天中午做项目需要一个模态窗口，想起上一个公司的项目经理曾经做过一个比较牛的模态窗口，至今没用搞清楚实现原理，平时也没有时间去分析，试着自己做了一个，用了一天的时间终于完成了，给大家一起分享， 也希望高手多提意见。第一次在博客园上发文章，挺高兴的。2008-11-11
javascript设计模式 – 适配器模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 适配器模式,结合实例形式分析了javascript适配器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JS获取年月日时分秒的方法,结合实例形式分析了JS获取具体时间的常犯错误与相应解决方法,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了js遍历添加栏目类添加css 再点击其它删除css的实例代码,非常不错，具有一定的参考借鉴借鉴价值，需要的朋友可以参考下2018-06-06
js跳转页面的方法有很多，本文搜集整理了一些，个人感觉还不错，希望对大家有所帮助2014-02-02
本文主要介绍了JavaScript中Function与Object的关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论