点击select下拉框获取option的属性值

Posted 前端潘潘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击select下拉框获取option的属性值相关的知识,希望对你有一定的参考价值。

select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下,结果一运行悲催了,怎么点击option事件就是不会执行。这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然大悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()方法来获取,下面通过代码解释一下,代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 告诉IE使用最新的引擎渲染网页 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <div>
            <select id="choice">
                <option value="1">东方1</option>
                <option value="2">东方2</option>
                <option value="3">东方3</option>
                <option value="4">东方4</option>
            </select>
        </div>
    </body>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        $("#choice").change(function () {
            let $dom = $("#choice");
            let index = $dom[0].options[$dom[0].selectedIndex].value;
            alert(index);
        });
    </script>
</html>

如上面代码所示,给select添加change()方法,用来监听下拉框的变化,当点击下拉框option进行选择时,select发生变化,触发change()事件,$dom[0].selectedIndex表示点击option的索引值,select option的索引值默认从0开始,$dom[0].options[$dom[0].selectedIndex]表示所点击option对象,取到对象之后就可以取相应的属性值了。在这里用到$dom[0],是因为selectedIndex和options是dom的属性,只有dom对象才能去调用,所以在这里进行了jquery对象的转换。至于jquery对象和dom对象的相互转换,我在博客中有分享,欢迎查看。

以上是关于点击select下拉框获取option的属性值的主要内容,如果未能解决你的问题,请参考以下文章

45、vue select下拉框绑定默认值

如何使用JS获取下拉列表框的显示值

vue select下拉框绑定默认值

bootstrap下拉框select怎么实现

jquery 怎样获取select多选下拉框所有选项的值

jquery 获得select下拉框选择中的属性值