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对象的相互转换，我在博客中有分享，欢迎查看。

补充：上面介绍的是最基本的方法，后来在项目中使用了简单的方法：

//获取option文本

$("#choice option:selected").text();

//获取option的value值

$("#choice option:selected").val();

//获取option的属性值

$("#choice option:selected").attr("属性");

点击select下拉框获取option的属性值的更多相关文章

  1. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  2. Python3.x：遍历select下拉框获取value值

    Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...

  3. 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  4. 2. select下拉框获取选中的值

    1.获取select选中的value值: $("#select1ID").find("option:selected").val();  --select1ID ...

  5. 点击select下拉框，触发事件

    <div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...

  6. select下拉框获取下拉项值的问题

    新发现: select option如果里面不写value值,默认提交<option></option>中间的值. 切记:真正提交的值写在value属性里面,option之间只 ...

  7. 如何获取select下拉框中option选中的文本值

    $(select的id或者class).change(function(){ $(this).find("option:selected").text() }) 源文:https: ...

  8. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  9. JQuery操作select下拉框

    JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...

随机推荐

  1. Lintcode376-Binary Tree Path Sum-Easy

    376. Binary Tree Path Sum Given a binary tree, find all paths that sum of the nodes in the path equa ...

  2. 配置SAP GUI FOR HTML（通过WEB方式登录）

    配置SAP GUI FOR HTML(通过WEB方式登录) SAP系统可以通过安装 SAP GUI.SAP GUI FOR JAVA.SAP GUI WEB FOR JAVA.SAP GUI FOR ...

  3. requests SSLError: hostname 'ccc.xxx.com' doesn't match '*.b0.upaiyun.com'

    证书不匹配问题 1.对于python自带的 urllib库  解决办法 import ssl ssl.match_hostname = lambda cert, hostname: True 2. 对 ...

  4. ubuntu中可以ping通IP地址但是ping不通域名的问题（www.baidu.com）

    治标不治本的办法:每次开机后执行sudo /etc/init.d/resolvconf restart就可以ping通. 治本方法见原博:https://blog.csdn.net/WFping518 ...

  5. nyoj308-Substring

    #include<stdio.h> #include<string.h> #include<string> #include<math.h> #incl ...

  6. 『TensorFlow』函数查询列表_神经网络相关

    tf.Graph 操作 描述 class tf.Graph tensorflow中的计算以图数据流的方式表示一个图包含一系列表示计算单元的操作对象以及在图中流动的数据单元以tensor对象表现 tf. ...

  7. [la P5031&hdu P3726] Graph and Queries

    [la P5031&hdu P3726] Graph and Queries Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: ...

  8. Hive入门学习

    Hive学习之路 (一)Hive初识 目录 Hive 简介 什么是Hive 为什么使用 Hive Hive 特点 Hive 和 RDBMS 的对比 Hive的架构 1.用户接口: shell/CLI, ...

  9. Python之路-函数

    一.函数是什么: python中函数定义:函数是逻辑结构化和过程化的一种编程方法.定义函数的方法为: def function(): ""The function definiti ...

  10. 使用Git上传项目到Gitee

    参考原文链接为:https://blog.csdn.net/qq944639839/article/details/79864081 1.打开GitBash 2. cd Client //进入工程目录 ...