jq 下拉列表选中事件_JQuery select各种事件
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料
一、基础取值问题
例如
1、设置value为pxx的项选中
$(".selector").val("pxx");
2、设置text为pxx的项选中
$(".selector").find("option:contains('pxx')").attr("selected",true);
注意:之前$(".selector").find("option[text='pxx']").attr("selected",true);这种写法是错误的,目前个人证实input支持这种获取属性值的写法:"input[text='pxx']",select中需要"option:contains('pxx')"这样获取。
(感谢博友@ sunnyjs 指正)
这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
$(".selector").val();
4、获取当前选中项的text
$(".selector").find("option:selected").text();
这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。
二、很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。
如:$(".selector1").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中,这里的option一般都是用循环生成多个了
var option = $("").val(1).text("pxx");
$(".selector2").append(option);
});
三、jQuery获取Select选择的Text和Value:
语法解释:
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
四、jQuery设置Select选择的 Text和Value:
语法解释:
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
五、jQuery添加/删除Select的Option项:
语法解释:
1. $("#select_id").append("Text"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("请选择"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
六、jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关
1 获取一组radio被选中项的值
var item = $('input[name=items][checked]').val();
2 获取select被选中项的文本
var item = $("select[name=items] option[selected]").text();
3 select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
4 radio单选组的第二个元素为当前选中值
$('input[name=items]').get(1).checked = true;
七、获取值:
文本框,文本区域:$("#txt").attr("value");
多选框 checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[type=radio][checked]").val();
下拉框select: $('#sel').val();
八、控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组 radio: $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框 select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("11112222").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
jq 下拉列表选中事件_JQuery select各种事件相关推荐
- jquery绑定元素id事件_JQuery绑定click事件的3种写法
1.首先你得有jquery 1.7以上的版本的js 2.将js导入项目 3.jsp源码 <%@ page language="java" contentType=" ...
- JQuery select各种事件
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...
- js离焦事件_jquery 获得焦点和失去焦点事件
前端网站中如果存在一些让用户填写内容的表单元素的话,我们可以使用JQ中获得焦点事件和失去焦点事件,来给用户作出一些提示的内容.今天我们就说一说JQuery下获得焦点和失去焦点的事件的使用方法. jqu ...
- Elementui select 设置点击事件,在Change事件前触发
想要在changge事件触发前,来触发一个事件,可以直接在 Select 选择器上面添加点击事件,但是这样点击事件是不会生效的,需要在点击事件后面加上native <el-selectv-mod ...
- html 点击文本框则选中,JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
- jquery 检测回车事件_jquery 回车事件
简单地记下jquery实现回车事件,代码如下: 全局: $(document).keydown(function(e){ if(e.keyCode==13){ $(".login-li in ...
- change事件与select事件
作者:老薛 撰写时间:2019年7月23日 change事件是jQuery表单事件.在<input>元素中,<textarea>和<select>元素的 ...
- easyUI table datagrid 选中取消全选触发事件
业务中可能会需要实时的监听表格中的行勾选事件来实现一些需求,根据 easyUI 绑定table id,datagrid 选中取消全选触发事件. 需要注意的是,将.datagrid方法放在$(funct ...
- python鼠标选中事件_python对绑定事件的鼠标、按键的判断实例
当多个事件绑定了同一个命令,那么在命令内部根据不同的事件进行处理的时候,怎么确定哪个事件发生了呢,用下面的来检测,经过测试处理tab键和alt键不能识别,其他单个都能被识别. 还有个事件的type属性 ...
最新文章
- 浏览器渲染机制面试_面试官不讲码德,问我Chrome浏览器的渲染原理(6000字长文)...
- 使用Maven管理的项目,如何设置Context Root
- Gitlab上传代码
- LeetCode Algorithm 203. 移除链表元素
- 线性序列机与串口接口DAC驱动设计与验证
- java与bartender_Java调取Bartender使用教程.md
- 使用Visual Studio 创建可视Web Part部件
- 学点数学(3)-函数空间
- IDEA社区版找不到tomcat
- 交通流预测python代码_Python 3 amp; Keras 实现基于神经网络的交通流预测
- linux删除5天前文件和目录,Linux Shell命令定时删除指定目录下n天前的文件
- summernote 不能上传图片_Typora自定义命令自动上传图片
- Enterprise Library 缓存应用程序块快速入门
- mysql字符类型总结及常用字符函数
- 计算机网络的三种通讯模式(单播,广播,组播)小结
- zend studio html乱码,解决Eclipse/Zend Studio编辑xml/html乱码问题
- 傲梅分区助手克隆Linux硬盘,傲梅分区助手怎么复制磁盘?分区助手克隆磁盘的具体方法...
- 单片机、嵌入式ARM学习网站推荐(多年的积累)
- Document.getElement方法
- vue 井号_使用Vue 2制作井字游戏:第1部分
热门文章
- 用不了tradingview?那自己捣鼓一个属于自己的量化分析平台
- keyshot渲染图文教程_keyshot基础图文教程,手把手教你用keyshot制作动画效果
- Git SSH 方式无法 push 踩坑
- 电子计算机显示屏不亮了,手把手教你电脑显示器不亮怎么办
- 《沙丘》全球票房突破3.5亿美元,这部科幻巨制到底有多厉害?
- 控制led亮度C语言程序,单片机pwm控制led亮度原理图
- java费切罗_细数目前主流的十二个自行车种类
- 工作中那些让人印象深刻的BUG(3)
- 混合正弦余弦算法和Lévy飞行的麻雀算法
- java通过itext方法往pdf中插入图片(交互式pdf插入图片无法显示)