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. 【论文笔记】CBAM: Convolutional Block Attention Module

    CBAM: Convolutional Block Attention Module 2018-09-14 21:52:42 Paper:http://openaccess.thecvf.com/co ...

  2. HDFS简单编程实例：文件合并

    下图显示了HDFS文件系统中路径为“localhost:50070/explorer.html#/user/hadoop”的目录中所有的文件信息: 对于该目录下的所有文件,我们将执行以下操作: 首先, ...

  3. ios外派公司—提供ios程序员外派ios应用外包业务（北京动点 可签合同）

    北京动点飞扬长年提供ios工程师外派业务. 我公司程序员平均技术情况如下: 1.二年以上iPhone/ipad开发经验: 2.熟练使用Xcode.Objective C编码技能: 3.熟悉iOS开发框 ...

  4. 使用 R 语言挖掘 QQ 群聊天记录

    1.获取数据 从 QQ 消息管理器中导出消息记录,保存的文本类型选择 txt 文件.这里获取的是某群从 2016-04-18 到 2016-05-07 期间的聊天记录,记录样本如下所示. 消息记录(此 ...

  5. selenium + firefox驱动版本对应。

    1)selenium 2.51.0====firefox 46 selenium 3.11.0 ====firefox 56 后来发现最新的火狐浏览器好多插件都不能用了.所以果断回到46.对应的2.5 ...

  6. 【转】 ISP概述、工作原理及架构

    1.概述 ISP全称Image Signal Processing,即图像信号处理.主要用来对前端图像传感器输出信号处理的单元,以匹配不同厂商的图象传感器. ISP 通过一系列数字图像处理算法完成对数 ...

  7. web 服务发布注意事项

    1.在发布的时候首先查看服务器对外开放的端口,如果没有最好和客户进行沟通需要开放那些对应的端口,要不外界无法访问发布的站点. 2.在oracle需要远程控制服务器的数据库的时候需要开发1521端口.

  8. Putting Boxes Together CodeForces - 1030F (带权中位数)

    #include <iostream> #include <algorithm> #include <cstdio> #include <math.h> ...

  9. MySQL字符串列与整数比较

    一.问题说明 为了简便在存储时我们经常将整型字段也以字符串形式存储(如id值),但在筛选比较时就需要将该字段转为数值类型. 二.处理办法 2.1 使用cast函数进行类型转换 cast函数格式---- ...

  10. Eclipse调试多线程代码

    Eclipse调试多线程代码 标签: eclipse 调试 多线程 | 发表时间:2013-02-16 05:51 | 作者:czjuttsw 分享到: 出处:http://blog.csdn.net ...