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. Linux学习进阶示意图

    Linux 基础 Linux 基础 Linux安装专题教程 Linux中文环境 Linux—从菜鸟到高手 鸟哥的Linux私房菜 基础学习篇(第二版) Ubuntu Linux入门到精通 Linux标 ...

  2. frame和bounds有什么不同？

    frame指的是该view在父view坐标系统中的位置和大小.(参照物是他的父坐标系统). bounds指的是该view在他本身的坐标系统中的位置和大小.(参照点是本身的坐标系统).

  3. Selenium3.6.0+Firefox55+JDK8.0配置

    一.安装JDK8.0(自行百度安装步骤) 二.在eclipse的偏好设置中选择java版本为8.0 三.Maven配置 <project xmlns="http://maven.apa ...

  4. js获取css样式封装

    封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(ob ...

  5. [python](windows)分布式进程问题：pickle模块不能序列化lambda函数

    运行错误:_pickle.PicklingError: Can't pickle <function <lambda> at 0x000002BAAEF12F28>: attr ...

  6. npm下设置NODE_ENV下mac与windows的差异

    linux & mac: export NODE_ENV=production windows:set NODE_ENV=production windows: mac:

  7. html5（一）

    HTML5 三个基本特色:结构.样式.功能. <!DOCTYPE html ><html lang="en"><head> <meta c ...

  8. 阿里云ssh断开处理办法

    一.背景说明 1.1 墙外的吐槽 云是个好东西但我一直不觉是个有那么好的东西,因为就较多次的体验来看,用得很难受:如果要我来选我宁愿自建机房.要说难受的具体原因原来倒是没想得很清楚,现在想来网速慢不是 ...

  9. 协程----greenlet模块,gevent模块

    1.协程初识,greenlet模块 2.gevent模块(需要pip安装) 一.协程初识,greenlet模块: 协程:是单线程下的并发,又称微线程,纤程.英文名Coroutine.一句话说明什么是线 ...

  10. leetcode python 012 hard 合并k个有序链表

    #[LeetCode] Merge k Sorted Lists 合并k个有序链表(升序) import numpy as npimport time class Node(object):    d ...