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

如下复制代码代码如下: <!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，选择two2，选择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 : 0IE9/Firefox/Safari/Chrome/Opera : 3IE6/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元素的表现差异

　　推荐阅读

　　基于jQuery的合并表格中相同文本的相邻单元格的代码

ONE 已经生成的数据表格大致内容如下：地区地区商品代码商品名称数量有效期至距效期（月）产品批号规格单位条形码广东深圳 00028 红花油广东深圳 00028 红花油 >>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/JS/24730.html

1/2 1