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生产批量批处理执行命令
Jul 28 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
javascript制作2048游戏
Mar 30 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 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
PHP的FTP学习(四)
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php生成随机颜色的方法
2014/11/13 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
浅谈numpy生成数组的零值问题
2018/11/12 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
金融学专科生自我鉴定
2014/02/21 职场文书
业务员简历自我评价
2014/03/06 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server