原生js获取select标签选中值

最新推荐文章于 2021-11-27 12:49:23 发布

原创最新推荐文章于 2021-11-27 12:49:23 发布 · 3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

成长历程

本文介绍如何使用原生JavaScript获取单选及多选Select元素的选中值，包括选中的索引、文本和值，并提供了完整的代码示例。

this.selectedIndex; // 选中的索引
this.options[_index].text; // 选中的文本
this.options[_index].value; // 选中的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js获取select选中值</title>
        <style type="text/css">
            body{
                padding-left: 100px;
            }
            div{
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <select id="one">
            <option>11111</option>
            <option>22222</option>
            <option>33333</option>
        </select>
        <div class="one"></div>

        <select id="two" multiple="true">
            <option>11111</option>
            <option>22222</option>
            <option>33333</option>
        </select>
        <div class="two"></div>

        <script>
            /**
             * 原生JS获取select选中值
             **/
            var one = document.getElementById('one');
            one.addEventListener('change', function() {
                var _index = this.selectedIndex; // 选中索引,如果是多选，则永远获取第一个
                var _text = this.options[_index].text; // 选中文本
                var _value = this.options[_index].value; // 选中值

                document.getElementsByClassName('one')[0].innerText= "选中的索引是："+_index
                    + "    选中的文本是："+ _text
                    + "    选中的值是：" + _value;
            })

            /**
             * 原生JS获取多选select选中值
             **/
            var two = removeWhitespace(document.getElementById('two'));
            two.addEventListener('change', function() {
                var _two = document.getElementsByClassName('two')[0];
                var str=""; // 存储选中值
                var fid = two.childNodes; // 得到所有的option
                for(var i = 0; i < fid.length; i++) {
                    if(fid[i].selected==true){ // 判断
                        str += "选中索引："+ fid[i].index + ",选中文本："+fid[i].text + "选中值：" + fid[i].value +"，";

                    }

                }
                _two.innerText = str;
            })

            // 清除节点内空格
            function removeWhitespace(xml){
                var loopIndex;  

                for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++){  
                    var currentNode = xml.childNodes[loopIndex];  
                    if (currentNode.nodeType == 1){  
                        removeWhitespace(currentNode);  
                    }  

                    if (((/^\s+$/.test(currentNode.nodeValue))) &&(currentNode.nodeType == 3)){  
                        xml.removeChild(xml.childNodes[loopIndex--]);  
                    }  
                }
                return xml;
            }
        </script>
    </body>

</html>

标签

#select取值