jquery操作select(取值,设置选中)
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料
一、基础取值问题
例如<select class="selector"></select>
1、设置value为pxx的项选中
$(".selector").val("pxx");
2、设置text为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true);
这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
$(".selector").val();
4、获取当前选中项的text
$(".selector").find("option:selected").text();
这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。
二、很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。
如:$(".selector1").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中,这里的option一般都是用循环生成多个了
var option = $("<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("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为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的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
jquery操作select(取值,设置选中)的更多相关文章
- jquery操作select(取值,设置选中) 基础
每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...
- jquery操作select取值赋值与设置选中[转]
本节内容:jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1 ...
- jquery操作select(取值,设置选中)[转]
每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...
- [转] jquery操作select(取值,设置选中)
每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...
- jquery操作select(取值,设置选中)(转)
http://www.cnblogs.com/liaojie970/p/5210541.html 比如<select class="selector"></sel ...
- jquery操作select(取值,设置选中
比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector" ...
- jquery radio取值,checkbox取值,select取值及选中
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('in ...
- Jquery常用radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置
获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...
- JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值
//**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...
随机推荐
- iOS学习笔记——iOS高级控件
UITableView UITableView的样式有两种,一种是Grouped(左图),另一种是Plain(右图),如下图,它的属性是style,类型为UITableViewStyle,枚举值分别是 ...
- iOS 阶段学习第十天笔记(结构体)
iOS学习(C语言)知识点整理 一.数据结构 1)概念:数据结构是指计算机程序中所操作的对象——数据以及数据元素之间的相互关系和运算. 2)结构体必须有struct 关键字修饰. 实例代码: stru ...
- [教程]MongoDB 从入门到进阶 (User系统)
自从MongoDB升级到2.4之后,User系统,或者说是权限系统有了翻天覆地的变化. 在MongoDB2.4之前的User系统,除了用户名和密码之外,只有一个ReadOnly属性. 如果一个用户在a ...
- C# 站点IP访问频率限制 针对单个站点
0x00 前言 写网站的时候,或多或少会遇到,登录,注册等操作,有时候,为了防止别人批量进行操作,不得不做出一些限制IP的操作(当前也可以用于限制某个账号的密码校验等). 这样的简单限制,我们又不想对 ...
- DevExpress Ribbongallerybaritem选择性皮肤重组
void InitSkinGallery() () { SkinHelper skinHelper = new SkinHelper(); RibbonControl masterRibbonCont ...
- Lucene.net站内搜索—4、搜索引擎第一版技术储备(简单介绍Log4Net、生产者消费者模式)
目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
- (3)JSTL的fn方法库
fn:functions,fn之所以称之为方法库,是因为fn使用不像core,fmt标签那样遵循<prefix:tagName>的格式,而是遵循fn:methodName()的格式 < ...
- Voix.js – 使用声音来控制和操纵你的网站
我们通常使用鼠标和键盘(在移动端使用触摸)来操作网站,如今 Voix.js 能够让我们使用声音控制网站,很酷吧?它可以启动和停止侦听麦克风,在检测到一个给定的关键字时触发绑定的特定事件.Voix.js ...
- 安卓 9.png 图片的制作
安卓的九宫格png图片可以自定义拉伸的区域,所以可以很方便的适应不同宽度高度的设备. 9.png格式是很纯正的png格式,与普通的png不同的是9.png格式的图片最外围有一圈1像素的透明区域,或者说 ...
- [Android]使用Gradle提交自己开源Android库到Maven中心库
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4388175.html 此文针对开源爱好者. 如果你想让别人使用 ...