点击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的属性值的主要内容，如果未能解决你的问题，请参考以下文章