重现代码如下
<!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>`元素用于创建下拉列表，而`<option>`标签则定义了下拉列表中的选项。当用户加载页面时，我们希望某个特定的选项被默认选中。这通常通过比较`<option>`标签的`value`属性与预先设定的值来...
这种方法的好处在于，即使`value`为空字符串，`a-select`也能正确地识别未选择状态，`placeholder`仍能正常工作，同时保持与后端接口的兼容性。 总之，当遇到`a-select`组件的`placeholder`在动态加载数据后失效的...
在JavaScript编程中，动态生成`select`元素中的`option`是一项常见的需求，特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，同时结合提供的`autoSelect.html`和`autoselect.txt`...
通过设置为空字符串可以清空文本框的值。 3. **设置复选框的选中状态**： ```javascript $("#chk1").prop("checked", true); ``` 可以使用`.prop("checked", true)`来设置复选框为选中状态。 4. **设置单选...
综上所述，字符串截取是一个在日常开发中非常实用的功能，尤其在处理包含多种语言字符的数据时更为重要。通过合理地选择编码方式和精心设计的算法，可以有效地处理各种复杂的字符串截取需求。同时，熟练掌握 jQuery ...
1. **获取`value`值**：`value`属性是`<option>`元素的内置属性，可以用来保存任何字符串数据。要获取选中的`<option>`的`value`，可以通过`this.options[this.selectedIndex].value`来实现。这里的`this`通常是指`...
通过一个循环遍历所有option元素，并将每个元素的text和value组合成字符串，然后将这些字符串拼接到一个数组或一个长字符串中。 ```javascript var arr = new Array(); // 数组定义标准形式 var all = ""; // 定义...
这里的`request.getParameterValues()`方法返回一个字符串数组，包含了用户在表单中选中的所有选项的值。 博客链接（虽然这里没有给出具体内容）通常会提供更详细的实现步骤，可能包括如何与后端交互、如何处理数据...
在描述中提到的例子中，服务器端返回一个JSON字符串，然后这个字符串被绑定到一个下拉框，实现级联效果。这是一个常见的场景，比如当我们需要根据用户在第一个下拉框的选择动态填充第二个下拉框的选项时。下面是一个...
在本篇文章中，我们将探讨如何使用 jQuery 来操作 HTML 中的 `<select>` 元素，包括获取选中项的文本、值和索引，以及添加和删除 `<select>` 的 `<option>` 节点。 首先，我们来看如何获取 `<select>` 元素中选中的...
在Java中，你需要先解析HTML字符串，提取`<select>`元素及其`<option>`，然后使用HashMap处理，最后生成新的HTML字符串返回给前端。 总的来说，使用HashMap或Map这类数据结构可以有效地去除HTML中`<select>`的重复...
`value`属性是每个`<option>`标签的默认属性，用于存储选项的标识符，通常是一个字符串或者数字。而`text`则是用户在界面上看到并选择的文本内容。在Vue.js中，我们可以通过监听`v-model`绑定的值变化来获取当前选中...
2. **使用`StringBuilder`进行字符串拼接**：虽然在示例代码中未直接使用`StringBuilder`类，但这种方法在实际开发中是十分推荐的。 3. **处理用户输入数据**：从HTTP请求中获取用户提交的数据，并将其赋值给相应的...
// 方法二：设置innerHTML为空字符串 document.getElementById('mySelect').innerHTML = ''; ``` **注意**：第一种方法更常见且推荐使用，因为它不会触发浏览器的事件，而第二种方法可能会触发一些基于`innerHTML`...
在非IE8浏览器中，比如Firefox、Chrome等，使用jquery获取select元素的选中值时，获取到的是字符串类型。但在IE8浏览器中，获取到的是一个数组类型，数组的第一个元素是字符串值。如果直接将这个数组POST发送到后台...
5. **重新插入排序后的`<option>`**：由于`sort()`方法不会改变DOM结构，所以排序后需要将新的`<option>`数组重新插入到`<select>`元素中。可以使用`removeChild`和`appendChild`方法完成此操作。 以下是一个简单的...
使用`<label>`标签关联`<select>`元素，提供清晰的标签文本，并确保`<option>`的`value`属性有意义，以便屏幕阅读器用户理解每个选项的含义。 六、优化性能 对于包含大量选项的多选列表，考虑使用懒加载技术，只在...