Js读取select单选值的几种方法

最新推荐文章于 2022-10-19 04:21:39 发布

widenstage

最新推荐文章于 2022-10-19 04:21:39 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/widenstage/article/details/68946687

版权

javascript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

首先，创建HTML如下：

   <form id="form1">
        <table  border="0">
          <tr>
                <td>编程时间：</td>
                <td>
                    <select name="code" id="code">
                        <option value="never">不编程</option>
                        <option value="6" selected="selected">不到六个月</option>
                        <option value="6-12">六到十二个月</option>
                        <option value="12-24">十二到二十四</option>
                        <option value="24">大于二十四</option>
                    </select>
                </td>
            </tr>
        </table>
   </form>

方法

        function readselect1() {

            // 方法一
            var oSelect = document.getElementById('code');
            var ind = oSelect.selectedIndex;
            var val = oSelect.options[ind].value;
            var tex = oSelect.options[ind].text;
            alert("方法一 index=" + ind + ",val=" + val + ",text=" + tex);

            // 方法二
            oSelect = document.getElementById('code');
            val = oSelect.value;
            alert("方法二 val=" + val);

            // 方法三
            val = form1.code.value;            
            alert("方法三 val=" + val);
            
            // 方法四
            val = $("#code").val();
            alert("方法四 val=" + val);

            // 方法五
            val = $('select[name=code]').val();
            alert("方法五 val=" + val);

            // 方法六 版本在1.3之前 (FF和chrome下无效)
            tex = $("select[name=code] option[selected]").text();
            alert("方法六 text=" +tex);

            tex = $("select[name=code] option:selected").text();
            alert("方法六 text=" + tex);
            
            // 方法七
            tex = $("select[name=code]").find("option:selected").text();
            alert("方法七 text=" + tex);

        }