|
本文介绍一下在IE部分浏览器(主要是IE6\IE7\IE8)中Option未设值(value)时Select将获取空字符串 如下 01 <!DOCTYPE HTML> 02 <html> 03 <head> 04 <title>IE6/7/8中Option元素未设value时Select将获取空字符串</title> 05 </head> 06 <body> 07 <select onchange="alert(this.value)"> 08 <option>one</option> 09 <option>two</option> 10 <option>three</option> 11 </select> 12 </body> 13 </html> 很明显，IE9/Firefox/Safari/Chrome/Opera 的实现有一定道理。即当option的value和option的innerText相同时可以省略掉其value不写。这样更简洁。可惜 IE6/7/8 不支持这么写。为保证兼容所有浏览器，书写option时务必别少了value属性。 把上面的html代码稍作修改
2 <option value="1">one</option> 3 <option>two</option> 4 <option>three</option> 5 </select> 给第一个option添加了value属性。这时测试步骤如下 两次弹出的结果如下： 从结果上可以看出各浏览器的实现大概如下： IE6/7/8中，如果option没有value值，那么将返回空字符串。 再修改下代码
2 <option value="1">one</option> 3 <option> two </option> 4 <option>three</option> 5 </select> 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。再修改下代码 1 <select onchange="alert(this.value)"> 2 <option value="1">one</option> 3 <option><span>two</span></option> 4 <option>three</option> 5 </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做的更好。 |