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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
Jquery倒计时源码分享
May 16 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP安装问题
2006/10/09 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
scrapy头部修改的方法详解
2020/12/06 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
2013年军训通讯稿
2014/02/05 职场文书
公司请假条范文
2014/04/11 职场文书
员工安全生产承诺书
2014/05/22 职场文书
酒店节能减排方案
2014/05/26 职场文书
授权委托书(完整版)
2014/09/10 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
党建工作整改措施
2014/10/28 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
浅析Python中的套接字编程
2021/06/22 Python