点击select下拉框获取option的属性值
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的属性值的更多相关文章
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- Python3.x：遍历select下拉框获取value值
Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...
- 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
- 2. select下拉框获取选中的值
1.获取select选中的value值: $("#select1ID").find("option:selected").val(); --select1ID ...
- 点击select下拉框，触发事件
<div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...
- select下拉框获取下拉项值的问题
新发现: select option如果里面不写value值,默认提交<option></option>中间的值. 切记:真正提交的值写在value属性里面,option之间只 ...
- 如何获取select下拉框中option选中的文本值
$(select的id或者class).change(function(){ $(this).find("option:selected").text() }) 源文:https: ...
- jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- JQuery操作select下拉框
JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...
随机推荐
- [linux,springboot] - 记一次java项目部署
之前部署的java项目,打包war包后放入tomcat下,并配置conf下的server.xml,设置war包路径,设置是否自动解包与否等操作. 然后重启tomcat,稍等片刻,(web)java项目 ...
- (转载)Unity UGUI点击不同Button执行不同的方法(无参方法)
将脚本随意挂在任何位置 但是这个btnParent一定是 按钮的父节点 脚本很简单自己敲一遍就全都明白了 上脚本 OnClickTest using UnityEngine; using Un ...
- jQuery页面替换+php代码实现搜索后分页
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- [原]JSBSim 自动驾驶（浅出）
jsbsim的脚本文件分为几大类: 1.系统脚本: systems 包含通用飞机各部分功能模块组件以及自动飞行控件:Autopilot.xml 和 自动飞行的算法控件:GNCUtilities.x ...
- canvas资料
w3c比较全面的api http://www.w3school.com.cn/tags/html_ref_canvas.asp 一个总结比较全面的网站 http://blog.csdn.net/qq_ ...
- form表单的提交方式
开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单 <input type="submit"/> <!DOCTYPE htm ...
- 7.10 其他面向对象设计原则1: 开-闭原则OCP
其他面向对象设计原则1: 开-闭原则OCP Open-Closed Principle (OCP)5.1 设计变坏的前兆 Signs of Rotting Design 僵硬性 Rigidit ...
- mybatis_generator合并xml mapper文件
一.问题 用的mybatis.generator 1.3.6版本,版本没啥大关系. 目前的xml输出有两个主要的问题: 1.xml追加而不是覆盖 这样就导致一个xml mapper文件每个node都重 ...
- Android 音视频深入 十 FFmpeg给视频加特效（附源码下载）
项目地址,求starhttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/FFmpeg(AVfilte ...
- Visual Basic 2017 操作Excel和word【2】持续更新……
1.控制台程序创建Excel,并设置状态栏显示“Hello World”文本 Module Module1 Private exitXL As Boolean = False Dim WithEven ...