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. A4988和CNC SHIELD使用方法 步进电机

    接线视频 点这看视频 来源 https://www.basemu.com/a4988_pinout_and_how_to_use.html 注意要点 A4988既要12V外部供电,也要5V逻辑供电 我 ...

  2. NodeJS：（一）特性&环境&测试

    特性: ①非阻塞I/O,事件驱动,单线程 非阻塞I/O:进程不等I/O完成(阻塞是等I/O完成后才进行下一步) 事件驱动:异步操作结束后通知 ②优点 前端职责范围变大,统一开发体验 处理高并发(单位时 ...

  3. DAY6 元组、字典与集合

    一.元组 定义:t1 = (1, 2) # t1 = tuple((1,2)) 特点:有序存储.可存放多个数据.不可变(内部可以包含可变对象,可变对象已久可变) 应用场景:将不允许操作的列表可以转化为 ...

  4. Jfinal集成Spring

    JFinal框架也整合了spring框架,下面实现JFinal怎么去配置Spring框架.在JFinal中整合Spring使用到的类是SpringPlugin和IocInterceptor类 Spri ...

  5. 基于Python——实现远程下载sftp文件（只下载.zip文件）

    [背景]远程下载发布包等文件时,总是要使用WinSCP等工具登陆拖动.今天就介绍一种使用python下载文件到本地的方法. [代码实现] import paramiko # paramiko模块,基于 ...

  6. Django框架简介-模板系统

    2.4 模板 官方文档 2.4.1 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 2.4.1.1 变量 {{ 变量名 }} 变量名由字母数 ...

  7. javascript高级程序设计第3版——第二章使用javascript

  8. 【转】阿里云免费SSL证书申请与安装使用（IIS7）

    阅读目录 准备: 第一步:免费SSL证书申请 第二步:证书导入 第三步:分配服务器证书 最后一步:访问测试 回到顶部 准备: 阿里云已完成备案的域名一个 回到顶部 第一步:免费SSL证书申请 登陆阿里 ...

  9. Java线程池ThreadPoolExecutor&&Executors

    一.先看看传统的开启线程. new Thread(new Runnable() { @Override public void run() { } }).start(); 缺点: 1.每次new Th ...

  10. Makefile 宏定义 -D

    一.GCC编译器中使用:        -D macro=string,等价于在头文件中定义:#define   macro   string. 例如:-D TRUE=true,等价于:#define ...