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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
个人小程序接入支付解决方案
May 23 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
html中两种获取标签内的值的方法
Jun 16 jQuery
我的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
php自动获取目录下的模板的代码
2010/08/08 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
React组件的三种写法总结
2017/01/12 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python动态加载包的方法小结
2016/04/18 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
员工自我鉴定
2013/10/09 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
给校长的建议书400字
2014/05/15 职场文书
力学专业求职信
2014/07/23 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
排球赛新闻稿
2015/07/17 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL