select标签中值的获取方法

最新推荐文章于 2024-09-10 13:54:44 发布

尤成军军军

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量4.2k

点赞数 1

分类专栏：前端文章标签： select html option

本文链接：https://blog.csdn.net/qq_31083947/article/details/76607836

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.js" ></script>
    </head>

    <body>
        <div style="width: 100%;">
            <select id="1" onchange="getValue();">
                <option id="12" value="122">1222</option><!-- value="122" text="1222" -->
                <option id="13" value="133">1333</option><!-- value="133" text="1333" -->
                <option id="14" value="144">1444</option><!-- value="144" text="1444" -->
                <option id="15" value="155">1555</option><!-- value="155" text="1555" -->
            </select>
        </div>
        <script>
            function getValue() {
                //下面这两种效果是一样的，如果对应的option没有设置value属性的值，那么就会显示text值
                $("#1").val();//获得的就是你选中的option的中value属性的值
                $("#1 option:selected").val();//获得的就是你选中的option的中value属性的值

                //获取选中option的text值
                $("#1 option:selected").text();//获得的就是你选中的option的text值
            }
        </script>
    </body>
</html>