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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
React配置子路由的实现
Jun 03 Javascript
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
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
python正则表达式re模块详细介绍
2014/05/29 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python笔记之工厂模式
2019/11/20 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python自动登录QQ的实现示例
2020/08/28 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
党员思想汇报范文
2013/12/30 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
本科生自荐信
2014/06/18 职场文书
高三霸气励志标语
2014/06/24 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
个人典型事迹材料
2014/12/30 职场文书
劳动仲裁调解书
2015/05/20 职场文书
关于环保的宣传稿
2015/07/23 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
vscode中使用npm安装babel的方法
2021/08/02 Javascript
Java详细解析==和equals的区别
2022/04/07 Java/Android