JavaScript 获取 Select 元素选中值的完整指南

Select 元素选中机制与基础取值

当 select 元素下的所有 option 元素均未指定 selected 属性时，浏览器默认选中列表中的第一项。

利用 select.selectedIndex 属性，可以获取当前被选中 option 元素在列表中的索引值。

通过 select.options[select.selectedIndex] 表达式，可以直接获取到当前选中的 option DOM 元素对象。

对于定义了 selected="selected" 且 value="value3" 的 option 元素，可通过 option.value 获取其 value 属性值（即 value3），或通过 option.text 获取元素内的文本内容（即 text3）。

若 option 元素未定义 value 属性，在 IE 浏览器中 option.value 可能无法正确获取值；而在 Safari、Opera 和 Firefox 等浏览器中，option.value 仍能正常获取，其值等同于 option.text。

可通过检查 option.attributes.value 是否存在且其 specified 属性为 true，来判断 option 元素是否显式定义了 value 属性。

基于上述原理，以下是获取当前 select 元素值的完整脚本示例。

 
var getSelectValue = funtion(select) {
var idx = select.selectedIndex,
option,
value;
if (idx > -1) {
option = select.options[idx];
value = option.attributes.value;
return (value && value.specified) ? option.value : option.text);
} 
return null;
} 

以往因兼容性问题，开发者常使用 select.options[select.sekectedIndex].value 来取值，但现代浏览器中直接使用 select.value 通常即可满足需求。

 <select id="jb51net" onchange="alert(getSelectValue(document.getElementById('jb51net')))"> <option value="https://www.jb51.net">本站</option> <option value="http://s.jb51.net">服务器软件</option> </select> 

该取值函数也可绑定到事件触发器中。

<select id="jb51net" onchange="alert(getSelectValue(this))">

建议采用事件绑定的方式处理。