IE6/7/8中Option元素未设value时Select将获取空字符串


Posted in Javascript onApril 07, 2011

如下

<!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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
微信小程序实现授权登录
May 15 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
我的javascript 函数链之演变
Apr 07 #Javascript
JavaScript中链式调用之研习
Apr 07 #Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 #Javascript
javascript 单例/单体模式(Singleton)
Apr 07 #Javascript
Safari5中alert的无限循环BUG
Apr 07 #Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 #Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 #Javascript
You might like
?繁体转换的class
2006/10/09 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
多广告投放代码 推荐
2006/11/13 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python tornado上传文件的功能
2020/03/26 Python
介绍一下游标
2012/01/10 面试题
教师师德教育的自我评价
2013/10/31 职场文书
高三生物教学反思
2014/01/25 职场文书
学校卫生检查制度
2014/02/03 职场文书
五心教育心得体会
2014/09/04 职场文书
管理人员岗位职责
2015/02/14 职场文书
2015年库房工作总结
2015/04/30 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书