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 相关文章推荐
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
VUE脚手架具体使用方法
May 20 Javascript
vue特效之翻牌动画
Apr 20 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 socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
调试php程序的简单步骤
2019/10/04 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
python计算文本文件行数的方法
2015/07/06 Python
Python3多线程操作简单示例
2018/05/22 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python中while和for的区别总结
2019/06/28 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python里glob模块知识点总结
2021/01/05 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
物流专业求职计划书
2014/01/10 职场文书
小学庆六一活动方案
2014/02/28 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers