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 相关文章推荐
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
js实现网页抽奖实例
Aug 05 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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
PHP SPL使用方法和他的威力
2013/11/12 PHP
php时间戳转换的示例
2014/03/31 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP微信分享开发详解
2017/01/14 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
使用python绘制温度变化雷达图
2019/10/18 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
大专毕业生自我评价分享
2013/11/10 职场文书
职务任命书范本
2014/06/05 职场文书
个人融资协议书
2014/10/02 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers