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. redis缓存服务器集群搭建

    一.安装redis 1.下载redis [root@redis ~]# wget http://download.redis.io/releases/redis-4.0.11.tar.gz 2.安装编 ...

  2. 移动Web UI库（H5框架）有哪些，看这里就够了

    前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...

  3. js的点滴2

    博客: 1.大牛博客:每一篇博客都需要仔细的看.http://blog.csdn.net/hongchh/article/details/54744318 2.layui:的作者 贤心的博客:http ...

  4. Web版记账本开发记录（五）

    今天是第五天,不过今天有点事什么都没做,只是看了看一些教学视频, 今天家里有事, 还没来得及实践,等明天再实践,然后再完善完善.

  5. python模块--re模块

    常用的正则表达式模式: .  匹配除换行符以外的任意字符 \d  匹配一个数字字符.等价于 [0-9]. \D  匹配一个非数字字符.等价于 [^0-9]. \s  匹配任何空白字符,包括空格.制表符 ...

  6. Jboss解决只能通过localhost访问而不能使用IP访问项目的问题

    之前项目都是前后端完全分离,很少使用到后端语言的开发工具,最近使用intellij+Jboss进行项目部署开发,初始用发现项目启动后只能使用localhost进行项目访问,IP地址访问则提示页面404 ...

  7. border——边框属性

    一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...

  8. 在 .NET 项目中集成 SwaggerUI（2018.9.30）

    不多说,直接上教程! 1. 打开NuGet管理器搜索并安装 Swashbuckle和Swagger.Net两项 2. 修改生成设置 3. 修改SwaggerConfig文件 (1)去除注释 c.Inc ...

  9. Django框架（三）

    六.Django的视图层 视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML ...

  10. exadata cellcli

    cellcli [port_number] [-n] [-m] [-xml] [-v | -vv | -vvv] [-x] [-e command] The following table lists ...