不同浏览器得到select 标签option值的兼容问题

最新推荐文章于 2018-08-06 17:10:34 发布

Miss卿

最新推荐文章于 2018-08-06 17:10:34 发布

阅读量856

点赞数

分类专栏： web前端文章标签：如何获得select集合中的选中的值在IE部分浏览器中Option未设值时Select将获取空字符串

本文链接：https://blog.csdn.net/qingwenxiutong/article/details/84354649

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在使用select-option标签的时候。关于option取值的问题。

一、在IE部分浏览器中Option未设值时Select将获取空字符串

<!DOCTYPE HTML >

<html>

<head>

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

</head>

<body>

<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代码稍作修改

<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 值。

再修改下代码

<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。再修改下代码

<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做的更好。

二、如何获得select集合中的选中的值

<form name="form1" action="" method="post">
     <select id="testtt" οnchange="check()">
         <option value="office">办公室一号</option>
            <option value="office2">办公室二号 </option>
            <option value="office3">办公室三号</option>
        </select>
    </form>
<script language="javascript">
 function check()
 {
 var r=document.getElementById("testtt").value;
   alert(r);
 }
</script>