Js读取select多选的几种方法

最新推荐文章于 2024-06-11 16:39:30 发布

widenstage

最新推荐文章于 2024-06-11 16:39:30 发布

阅读量1.7w

点赞数 1

分类专栏： javascript 文章标签： html select javascript

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

版权

javascript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

首先，编写HTML如下：

   <form id="form1">
        <table border="0">
            <tr>
                <td>操作系统：</td>
                <td>
                    <select name="os" size="4" multiple="multiple" id="os">
                        <option value="windowxp" selected="selected">windowxp</option>
                        <option value="window7">window7</option>
                        <option value="window10">window10</option>
                        <option value="mac os">mac os</option>
                    </select>
                </td>
            </tr>
        </table>
   </form>

方法

       function readselect2() {

            // 方法一
            var os = document.getElementById("os");
            var msg = "被选中的项：";
            for (var i = 0; i < os.length; i++) {
                if (os.options[i].selected == true)
                    msg += " " + i + ":" + os.options[i].text;
            }
            alert(msg);

            // 方法二 jquery
            var val = $("#os").val();
            alert(val);     
            
            // 方法三 jquery
            val = $('select[name=os]').val();
            alert(val);

            // 方法四 jquery
            var selectedValues = [];
            var selectedTexts = [];
            $("#os :selected").each(function() {
                selectedValues.push($(this).val());
                selectedTexts.push($(this).text());                
            });
            alert(selectedValues);
            alert(selectedTexts);          

        }