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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
javascript实现Table排序的方法
May 15 Javascript
js预加载图片方法汇总
Jun 15 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 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
PHP之变量、常量学习笔记
2008/03/27 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
vue总线机制(bus)知识点详解
2020/05/10 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python中threading开启关闭线程操作
2020/05/02 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
保护环境建议书300字
2014/05/13 职场文书
化工工艺设计求职信
2014/06/25 职场文书
汇报材料怎么写
2014/12/30 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
mysql 获取相邻数据项
2022/05/11 MySQL