`
qingwenxiutong
  • 浏览: 19782 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

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

如何获得select集合中的选中的值在IE部分浏览器中Option未设值时Select将获取空字符串 
阅读更多

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


一、在IE部分浏览器中Option未设值时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，选择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做的更好。



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

 

<form name="form1" action="" method="post">
     <select id="testtt" onchange="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>













 

 

 

分享到：
| js倒计时
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    固定宽度下拉列表select中option内容显示不全问题解决方法

    不过，这种方法在不同浏览器间的兼容性可能存在问题，因为不是所有浏览器都支持对`&lt;option&gt;`元素应用CSS。例如，可以创建一个`&lt;div&gt;`，使其看起来像下拉列表，然后使用`:before`或`:after`伪元素来显示`&lt;option&gt;`的...

    select特色下拉框个性下拉框兼容所有浏览器

    这些插件提供了丰富的自定义选项，如搜索功能、分组选项、多选模式等，且它们通常已经处理了浏览器兼容性问题。例如，Select2可以将原始的HTML`&lt;select&gt;`元素转换为一个高度可定制的下拉框，同时保持与原生元素的...

    IE6中select标签的option不能disabled的解决方案

    在早期的Internet Explorer 6（简称IE6）浏览器中，存在一个众所周知的兼容性问题：`&lt;select&gt;`标签内的`&lt;option&gt;`元素无法正确地应用`disabled`属性。这个问题使得开发者无法在IE6中实现禁用某些选项的功能，这对于...

    select标签multiple属性的使用方法.zip

    这里的`selectName`是你`&lt;select&gt;`标签的`name`属性值。 ### 四、CSS样式与交互 为了使多选下拉列表更具吸引力和用户体验，可以使用CSS对其进行自定义。例如，可以更改其大小、颜色、边框等： ```css select...

    页select中如何实现选择option其中一个选项，显示相关的内容

    - 创建一个`&lt;select&gt;`元素，并为其添加多个`&lt;option&gt;`元素，每个`&lt;option&gt;`的`value`属性值对应新闻标题。 - 在页面上创建一个`&lt;div&gt;`元素，用作显示新闻内容的容器。 2. **CSS样式设置**： - 通过CSS将`&lt;div&gt;`...

    用JavaScript来美化HTML的select标签的下拉列表效果

    通过上述的方法，开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题，并通过JavaScript为用户提供更加美观和友好的交互体验。同时，使用这种方法也可以增强select的功能，比如添加搜索功能，支持多选...

    option属性的js事件浏览器差异

    `option`属性和与之相关的JS事件在不同浏览器之间可能存在差异，这些差异主要体现在事件处理、行为表现和兼容性上。了解并处理这些差异对于确保网页在各种浏览器上的正常运行至关重要。 1. **事件绑定差异** 在...

    select项内容过长解决办法

    2. **使用`title`属性**：可以为每个`&lt;option&gt;`添加`title`属性，当鼠标悬停在选项上时，会显示该属性的值作为提示。这可以帮助用户查看完整内容，但并不能解决默认显示的问题。 ```html &lt;select&gt; &lt;option title=...

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

    标题所提及的问题是，当`&lt;option&gt;`标签没有明确设置`value`属性时，用户在选择该选项后，`&lt;select&gt;`元素的`value`属性会返回一个空字符串，而不是预期的选项文本。这个现象在其他现代浏览器中通常不会出现，因此可能...

    解决IE下select标签innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Safari)

    本文将详细讨论一个特定的JavaScript问题，即在Internet Explorer（IE）浏览器中使用`innerHTML`属性向`&lt;select&gt;`元素插入`&lt;option&gt;`标签时遇到的bug，以及如何解决这个bug以实现跨浏览器兼容性，包括IE、Firefox、...

    删除元素标签 并在之和添加一个select标签_123

    在网页开发中，元素操作是常见的任务之一，包括删除元素标签和添加新的元素。...在实际应用中，确保根据项目的具体需求进行调整，并考虑到兼容性问题，因为不同的浏览器可能对某些API有不同的支持程度。

    select里实现checkbox选择和input里边实现上下一条

    在实际应用中，兼容性是一个关键问题。确保你的代码在各种浏览器和设备上都能正常工作非常重要。对于`select multiple`，大部分现代浏览器都支持这一特性，但老版本的IE可能需要额外处理。对于`contenteditable`的...

    js 操作select和option常用代码整理

    在不同浏览器中，添加`option`的方法可能不同。`add`方法在IE中有效，而在Firefox等其他浏览器中，应使用`options.add`。 10. **删除所有选项、删除单个选项** 可以通过`options.length=0`删除所有选项，或通过`...

    select下拉列表显示图片内容

    - **兼容性问题**：并非所有浏览器都支持对`&lt;option&gt;`元素的CSS自定义，尤其是背景图片。因此，需要测试并确保在主流浏览器中都能正常工作。 - **性能优化**：如果下拉列表包含大量选项，加载图片可能会导致页面加载...

    可文本输入的下拉框select

    6. 兼容性：确保在不同浏览器和设备上正常工作。 通过以上讨论，我们可以看到“可文本输入的下拉框select”是一个结合了传统HTML元素与动态交互设计的功能，它需要开发者具备HTML、CSS和JavaScript基础知识，以及...

    javascript对select标签的控制(option选项/select)

    在编写 JavaScript 代码时，需要注意不同浏览器可能存在的兼容性问题。例如，`add` 和 `remove` 方法在 Internet Explorer 和 Firefox 中的用法不同。为了确保代码在各浏览器中都能正常工作，可以使用 `obj.options....

    javascript各浏览器中option元素的表现差异

    JavaScript在不同浏览器中处理`&lt;option&gt;`元素时存在一些显著的行为差异，这主要涉及事件处理、事件源获取以及特定属性的兼容性问题。下面将详细解释这些差异。 1. **事件支持**： - Internet Explorer (IE) 6、7、...

    js获取select标签的值且兼容IE与firefox

    在JavaScript中，获取`select`标签的值是一个常见的任务，特别是在网页交互和表单处理中。这个需求在不同的浏览器中可能会有不同的实现方式，因此需要确保代码具有良好的浏览器兼容性，特别是针对IE和Firefox这两个...

    基于Jquery模拟Select,解决IE显示问题

    然而，在不同的浏览器中，Select的表现可能会有所差异，尤其是对于老旧版本的Internet Explorer（IE）。本文将深入探讨如何使用Jquery来模拟Select，以便更好地解决在IE中遇到的显示问题。 首先，让我们了解为什么...

    select框中的颜色变化.rar

    但需要注意的是，不同浏览器对select框样式的自定义支持程度不同，尤其是跨平台兼容性问题。 2. 使用JavaScript库：如jQuery UI或Bootstrap等，它们提供了预定义的样式和交互效果，可以轻松实现select框颜色的变化...

Magicbox
Global site tag (gtag.js) - Google Analytics