如何获取当前 select 元素的值 _ PlanABC – 怿飞’s Blog

2010-3-27 下午 - JS/Ajax/AS/Flex - form - javascript - select

如果 select 元素下的所有 option 元素均没有指定 selected 属性，会默认选中第一个。
可以通过 select.selectedIndex 获取到选中的 option 元素的索引。
可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素。
option 元素 <option selected="selected" value="value3">text3</option>，可以通过 option.value 获得 option 元素的 value 属性值，即 value3；可以通过 option.text 获得 option 元素内的文本，即 text3。
如果 option 元素没有定义 value 属性，则 IE 中 option.value 无法获得，但 Safari、Opera、FireFox 依旧可以通过 option.value 获得，值同于 option.text 。
可以通过 option.attributes.value && option.attributes.value.specified 来判断 option 元素是否定义了 value 属性。

故，获得当前 select 元素值的脚本如下：

var getSelectValue = function(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;
}

这篇文章发表2010年3月27日下午 14:05，并被分类于JS/Ajax/AS/Flex。您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论，也可以发表您的评论，或者在您自己的网站中引用（trackback）该篇日志。

共有15 条评论

1. vapour 2010年3月27日下午 4:06 ₪
我一直是直接使用select.value来获取select的选中值。
2. rs 2010年3月27日下午 4:25 ₪
$(‘selectId’).value 不就是selcet选中的option的值么
为什么还需要用select.options[idx].attributes.value ?
3. dongyuwei 2010年3月27日下午 4:33 ₪
IE下有个烦人的问题： console.log(document.getElementById(“test”).value);
在IE下无法得到value的值，把value改成其它名称如init_value就可以获得。
4. dongyuwei 2010年3月27日下午 4:34 ₪
评论系统把html直接过滤了？
5. 怿飞 2010年3月27日下午 5:59 ₪
@vapour and rs 对于value值可以通过select.value 取得的，但对于text值则需要通过select.options[select.sekectedIndex].txet 获得。
6. chaos 2010年3月28日上午 10:24 ₪
以前由于兼容性问题，大家用select.options[select.sekectedIndex].value来取值，不过现在用select.value都可以了
7. simaopig 2010年3月29日上午 10:01 ₪
option.attributes.value.specified

这个以前不知道，学习了，嗯。。
8. zengjiangli 2010年3月29日下午 2:24 ₪
很实用！
9. simaopig 2010年3月29日下午 3:32 ₪
function 不是funtion

return (value && value.specified) ? option.value : option.text);

后面的括号没有用。。语法错误，嗯。。
10. 怿飞 2010年3月29日下午 7:00 ₪
@simaopig 谢谢，已修正，笔误
11. lifesinger 2010年3月29日下午 9:15 ₪
还得考虑 multiple select, 整理了一段代码：
http://kissy.googlecode.com/svn/trunk/src/dom/dom.js
搜索 val 方法的实现

测试页面：
http://kissy.googlecode.com/svn/trunk/src/dom/test-dom.html
12. Adam 2010年3月31日下午 6:23 ₪
我最近也碰到了Select的问题，http://adamlu.com/?p=361 哈哈
13. 如何獲取當前 select 元素的值 « Baystars Design網頁設計公司 2010年10月19日上午 10:47 ₪
[...] 原文：需要點這裡… [...]
14. jack 2010年12月27日下午 4:44 ₪
这个现在都不能用了，ff新版本不好用了
15. Cson 2011年7月6日上午 10:09 ₪
请问为什么还有判断value.specified呢？

发表评论

导航