jQuery是如何控制和操作select的。先看下面的代码

比如<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”, 说的更确切一些是应该是jQuery控制 “option”, 看下面的jQuery代码:


<select id="test">
<option value="1">选项一<option>
<option value="2">选项一<option>
...
<option value="n">选项N<option>
</select>

//获取第一个option的值
$('#test option:first').val(); //最后一个option的值
$('#test option:last').val(); //获取第二个option的值
$('#test option:eq(1)').val(); //获取选中的值
$('#test').val();
$('#test option:selected').val(); //设置值为2的option为选中状态
$('#test').attr('value','2'); //设置最后一个option为选中
$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val()); //获取select的长度
$('#test option').length; //添加一个option
$("#test").append("<option value='n+1'>第N+1项</option>");
$("<option value='n+1'>第N+1项</option>").appendTo("#test"); //添除选中项
$('#test option:selected').remove(); //删除项选中(这里删除第一项)
$('#test option:first').remove();、 //指定值被删除
$('#test option').each(function(){
if( $(this).val() == '5'){
$(this).remove();
}
});
$('#test option[value=5]').remove(); //获取第一个Group的标签
$('#test optgroup:eq(0)').attr('label'); //获取第二group下面第一个option的值
$('#test optgroup:eq(1) : option:eq(0)').val();

Jquery 操作 Select 详解的更多相关文章

  1. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  2. net平台下c#操作ElasticSearch详解

    net平台下c#操作ElasticSearch详解 ElasticSearch系列学习 ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense Elasti ...

  3. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  4. SQLServer 常见SQL笔试题之语句操作题详解

    SqlServer 常见SQL笔试题之语句操作题详解 by:授客 QQ:1033553122 测试数据库 CREATE DATABASE handWriting ON PRIMARY ( name = ...

  5. ElasticSearch-.net平台下c#操作ElasticSearch详解

    ElasticSearch系列学习 ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense ElasticSearch第三步-中文分词 ElasticSea ...

  6. Linux : select()详解 和 实现原理【转】

    转自:http://blog.csdn.net/huntinux/article/details/39289317 原文:http://blog.csdn.net/boboiask/article/d ...

  7. c#操作ElasticSearch5详解

    c#操作ElasticSearch详解 ElasticSearch系列学习 ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense ElasticSearc ...

  8. ElasticSearch第五步-.net平台下c#操作ElasticSearch详解

    前面我们讲解了关于ElasticSearch的安装配置,以及CRUD 本章我将讲解怎么使用c#操作ElasticSearch. 首先你需要一定的技术储备,比如:asp.net webapi,mvc,j ...

  9. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

随机推荐

  1. JavaScript设计模式学习之路——面向对象的思想

    今天,我拿到了张容铭写的这本<JavaScript设计模式>这本书,开始了关于JavaScript更深一点的学习. 看到这本书开始的时候,虽然之前通过看书.一些比较好的视频的讲解,对Jav ...

  2. CodeForces Round #527 (Div3) B. Teams Forming

    http://codeforces.com/contest/1092/problem/B There are nn students in a university. The number of st ...

  3. (转)设置Sysctl.conf用以提高Linux的性能(最完整的sysctl.conf优化方案)

    Sysctl是一个允许您改变正在运行中的Linux系统的接口.它包含一些 TCP/IP 堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员提高引人注目的系统性能.用sysctl可以读取设置超过五百 ...

  4. vue-cli3使用cdn方式引入moment.js

    1. index.html引入: <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"&g ...

  5. Linux下启用MySQL慢查询

    MySQL在linux系统中的配置文件一般是my.cnf找到[mysqld]下面加上log-slow-queries=/data/mysqldata/slowquery.loglong_query_t ...

  6. 对xml的操作使用的类XElement的使用

    操作xml的类比较多,发现XElement类操作xml极其方便,下面列举一些操作方法 1.创建xml XElement xml = new XElement("root", new ...

  7. (一)Quartz2.2.1 简单例子

    转载至http://blog.csdn.net/a4307515/article/details/46985533 1.关键接口 Scheduler,任务调度的API:它可以用来启动或者终止任务等. ...

  8. BZOJ3884 上帝与集合的正确用法(欧拉函数)

    设f(n)为模n时的答案,由2k mod n=2k mod φ(n)+φ(n) mod n(并不会证),且k mod φ(n)=f(φ(n)),直接就可以得到一个递推式子.记搜一发即可. #inclu ...

  9. list的4种遍历方式

    import java.util.ArrayList;import java.util.Iterator;import java.util.List; import com.hbut.domain.P ...

  10. 数字表格(product)

    Portal -->broken qwq Description ​  求\(\prod\limits_{i=1}^n\prod\limits_{j=1}^m f[gcd(i,j)](mod\ ...