jquery控制select的text/value值为选中状态


Posted in Javascript onJune 03, 2014

每一次操作select的时候,总是要在网上翻下,太繁琐了,自己在这里总结下。

比如<select class="selector"></select>

1、设置value为“全部“的项选中

$(".selector").val("全部");

2、设置text为“全部“的项选中
$(".selector").find("option[text='全部']").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); 
});
Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Javascript中浮点数相乘的一个解决方法
Jun 03 #Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 #Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 #Javascript
php+js实现倒计时功能
Jun 02 #Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 #Javascript
node.js入门教程
Jun 01 #Javascript
什么是Node.js?Node.js详细介绍
Jun 01 #Javascript
You might like
php4的session功能评述(二)
2006/10/09 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
浅析php学习的路线图
2013/07/10 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
探索node之事件循环的实现
2020/10/30 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python验证码识别的示例代码
2017/09/21 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python 美化输出信息的实例
2018/10/15 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
恒华伟业笔试面试题
2015/02/26 面试题
倡议书范文
2014/04/16 职场文书
求职教师自荐书
2014/06/19 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
Java基础——Map集合
2022/04/01 Java/Android