编程 Javascript

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元素的表现差异

IE6/7/8中Option元素未设value时Select将获取空字符串

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js克隆对象、数组的常用方法介绍

Sep 26 Javascript

用console.table()调试javascript

Sep 04 Javascript

使用cluster 将自己的Node服务器扩展为多线程服务器

Nov 10 Javascript

jquery实现可横向和竖向展开的动态下滑菜单效果

Aug 24 Javascript

全面详细的jQuery常见开发技巧手册

Feb 21 Javascript

JavaScript事件代理和委托详解

Apr 08 Javascript

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

Dec 02 Javascript

JavaScript解析JSON格式数据的方法示例

Jan 24 Javascript

如何通过非数字与字符的方式实现PHP WebShell详解

Jul 02 Javascript

微信小程序左滑删除实现代码实例

Sep 16 Javascript

你准备好迎接vue3.0了吗

Apr 28 Javascript

如何使用gpu.js改善JavaScript的性能

Dec 01 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