1. 如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个。
  2. 可以通过 select.selectedIndex 获取到选中的 option 元素的索引。
  3. 可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素。
  4. option 元素 <option selected="selected" value="value3">text3</option>,可以通过 option.value 获得 option 元素的 value 属性值,即 value3;可以通过 option.text 获得 option 元素内的文本,即 text3。
  5. 如果 option 元素没有定义 value 属性,则 IE 中 option.value 无法获得,但 Safari、Opera、FireFox 依旧可以通过 option.value 获得,值同于 option.text
  6. 可以通过 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;
}


共有15 条评论

  1. 1. 头像 vapour

    我一直是直接使用select.value来获取select的选中值。

  2. 2. 头像 rs

    $(‘selectId’).value 不就是selcet选中的option的值么
    为什么还需要用select.options[idx].attributes.value ?

  3. 3. 头像 dongyuwei

    IE下有个烦人的问题: console.log(document.getElementById(“test”).value);
    在IE下无法得到value的值,把value改成其它名称如init_value就可以获得。

  4. 4. 头像 dongyuwei

    评论系统把html直接过滤了?

  5. 5. 头像 怿飞

    @vapour and rs 对于value值可以通过select.value 取得的,但对于text值则需要通过select.options[select.sekectedIndex].txet 获得。

  6. 6. 头像 chaos

    以前由于兼容性问题,大家用select.options[select.sekectedIndex].value来取值,不过现在用select.value都可以了

  7. 7. 头像 simaopig

    option.attributes.value.specified

    这个以前不知道,学习了,嗯。。

  8. 8. 头像 zengjiangli

    很实用!

  9. 9. 头像 simaopig

    function 不是funtion

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

    后面的括号没有用。。语法错误,嗯。。

  10. 10. 头像 怿飞

    @simaopig 谢谢,已修正,笔误

  11. 11. 头像 lifesinger

    还得考虑 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. 12. 头像 Adam

    我最近也碰到了Select的问题,http://adamlu.com/?p=361 哈哈

  13. 13. 如何獲取當前 select 元素的值 « Baystars Design網頁設計公司

    […] 原文:需要點這裡… […]

  14. 14. 头像 jack

    这个现在都不能用了,ff新版本不好用了

  15. 15. 头像 Cson

    请问为什么还有判断value.specified呢?

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签