最近工作中总出现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(取值,设置选中)的更多相关文章

  1. jquery操作select(取值,设置选中) 基础

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...

  2. jquery操作select取值赋值与设置选中[转]

    本节内容:jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1 ...

  3. jquery操作select(取值,设置选中)[转]

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...

  4. [转] jquery操作select(取值,设置选中)

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...

  5. jquery操作select(取值,设置选中)(转)

    http://www.cnblogs.com/liaojie970/p/5210541.html 比如<select class="selector"></sel ...

  6. jquery操作select(取值,设置选中

    比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector" ...

  7. jquery radio取值,checkbox取值,select取值及选中

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('in ...

  8. Jquery常用radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置

    获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...

  9. JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

    //**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...

随机推荐

  1. iOS学习笔记——iOS高级控件

    UITableView UITableView的样式有两种,一种是Grouped(左图),另一种是Plain(右图),如下图,它的属性是style,类型为UITableViewStyle,枚举值分别是 ...

  2. iOS 阶段学习第十天笔记(结构体)

    iOS学习(C语言)知识点整理 一.数据结构 1)概念:数据结构是指计算机程序中所操作的对象——数据以及数据元素之间的相互关系和运算. 2)结构体必须有struct 关键字修饰. 实例代码: stru ...

  3. [教程]MongoDB 从入门到进阶 (User系统)

    自从MongoDB升级到2.4之后,User系统,或者说是权限系统有了翻天覆地的变化. 在MongoDB2.4之前的User系统,除了用户名和密码之外,只有一个ReadOnly属性. 如果一个用户在a ...

  4. C# 站点IP访问频率限制 针对单个站点

    0x00 前言 写网站的时候,或多或少会遇到,登录,注册等操作,有时候,为了防止别人批量进行操作,不得不做出一些限制IP的操作(当前也可以用于限制某个账号的密码校验等). 这样的简单限制,我们又不想对 ...

  5. DevExpress Ribbongallerybaritem选择性皮肤重组

    void InitSkinGallery() () { SkinHelper skinHelper = new SkinHelper(); RibbonControl masterRibbonCont ...

  6. Lucene.net站内搜索—4、搜索引擎第一版技术储备(简单介绍Log4Net、生产者消费者模式)

    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...

  7. (3)JSTL的fn方法库

    fn:functions,fn之所以称之为方法库,是因为fn使用不像core,fmt标签那样遵循<prefix:tagName>的格式,而是遵循fn:methodName()的格式 < ...

  8. Voix.js – 使用声音来控制和操纵你的网站

    我们通常使用鼠标和键盘(在移动端使用触摸)来操作网站,如今 Voix.js 能够让我们使用声音控制网站,很酷吧?它可以启动和停止侦听麦克风,在检测到一个给定的关键字时触发绑定的特定事件.Voix.js ...

  9. 安卓 9.png 图片的制作

    安卓的九宫格png图片可以自定义拉伸的区域,所以可以很方便的适应不同宽度高度的设备. 9.png格式是很纯正的png格式,与普通的png不同的是9.png格式的图片最外围有一圈1像素的透明区域,或者说 ...

  10. [Android]使用Gradle提交自己开源Android库到Maven中心库

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4388175.html 此文针对开源爱好者. 如果你想让别人使用 ...