最近工作中总出现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各种事件相关推荐

  1. jquery绑定元素id事件_JQuery绑定click事件的3种写法

    1.首先你得有jquery 1.7以上的版本的js 2.将js导入项目 3.jsp源码 <%@ page language="java" contentType=" ...

  2. JQuery select各种事件

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...

  3. js离焦事件_jquery 获得焦点和失去焦点事件

    前端网站中如果存在一些让用户填写内容的表单元素的话,我们可以使用JQ中获得焦点事件和失去焦点事件,来给用户作出一些提示的内容.今天我们就说一说JQuery下获得焦点和失去焦点的事件的使用方法. jqu ...

  4. Elementui select 设置点击事件,在Change事件前触发

    想要在changge事件触发前,来触发一个事件,可以直接在 Select 选择器上面添加点击事件,但是这样点击事件是不会生效的,需要在点击事件后面加上native <el-selectv-mod ...

  5. html 点击文本框则选中,JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。...

    内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...

  6. jquery 检测回车事件_jquery 回车事件

    简单地记下jquery实现回车事件,代码如下: 全局: $(document).keydown(function(e){ if(e.keyCode==13){ $(".login-li in ...

  7. change事件与select事件

     作者:老薛      撰写时间:2019年7月23日 change事件是jQuery表单事件.在<input>元素中,<textarea>和<select>元素的 ...

  8. easyUI table datagrid 选中取消全选触发事件

    业务中可能会需要实时的监听表格中的行勾选事件来实现一些需求,根据 easyUI 绑定table id,datagrid 选中取消全选触发事件. 需要注意的是,将.datagrid方法放在$(funct ...

  9. python鼠标选中事件_python对绑定事件的鼠标、按键的判断实例

    当多个事件绑定了同一个命令,那么在命令内部根据不同的事件进行处理的时候,怎么确定哪个事件发生了呢,用下面的来检测,经过测试处理tab键和alt键不能识别,其他单个都能被识别. 还有个事件的type属性 ...

最新文章

  1. 浏览器渲染机制面试_面试官不讲码德,问我Chrome浏览器的渲染原理(6000字长文)...
  2. 使用Maven管理的项目,如何设置Context Root
  3. Gitlab上传代码
  4. LeetCode Algorithm 203. 移除链表元素
  5. 线性序列机与串口接口DAC驱动设计与验证
  6. java与bartender_Java调取Bartender使用教程.md
  7. 使用Visual Studio 创建可视Web Part部件
  8. 学点数学(3)-函数空间
  9. IDEA社区版找不到tomcat
  10. 交通流预测python代码_Python 3 amp; Keras 实现基于神经网络的交通流预测
  11. linux删除5天前文件和目录,Linux Shell命令定时删除指定目录下n天前的文件
  12. summernote 不能上传图片_Typora自定义命令自动上传图片
  13. Enterprise Library 缓存应用程序块快速入门
  14. mysql字符类型总结及常用字符函数
  15. 计算机网络的三种通讯模式(单播,广播,组播)小结
  16. zend studio html乱码,解决Eclipse/Zend Studio编辑xml/html乱码问题
  17. 傲梅分区助手克隆Linux硬盘,傲梅分区助手怎么复制磁盘?分区助手克隆磁盘的具体方法...
  18. 单片机、嵌入式ARM学习网站推荐(多年的积累)
  19. Document.getElement方法
  20. vue 井号_使用Vue 2制作井字游戏:第1部分

热门文章

  1. 用不了tradingview?那自己捣鼓一个属于自己的量化分析平台
  2. keyshot渲染图文教程_keyshot基础图文教程,手把手教你用keyshot制作动画效果
  3. Git SSH 方式无法 push 踩坑
  4. 电子计算机显示屏不亮了,手把手教你电脑显示器不亮怎么办
  5. 《沙丘》全球票房突破3.5亿美元,这部科幻巨制到底有多厉害?
  6. 控制led亮度C语言程序,单片机pwm控制led亮度原理图
  7. java费切罗_细数目前主流的十二个自行车种类
  8. 工作中那些让人印象深刻的BUG(3)
  9. 混合正弦余弦算法和Lévy飞行的麻雀算法
  10. java通过itext方法往pdf中插入图片(交互式pdf插入图片无法显示)