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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
js Dialog 实践分享
Oct 22 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
我的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
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
express 项目分层实践详解
2018/12/10 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
浅析python标准库中的glob
2020/03/13 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
西班牙在线光学:Visual-Click
2020/06/22 全球购物
社团招新宣传语
2015/07/13 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Redis集群的关闭与重启操作
2021/07/07 Redis
Python采集股票数据并制作可视化柱状图
2022/04/04 Python