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对象的相互转换，我在博客中有分享，欢迎查看。
时间： 2024-08-11 03:30:07