jquery操作select详解(取值,设置选中)


Posted in Javascript onFebruary 07, 2014

每一次操作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);
});
Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
js原生map实现的方法总结
Jan 19 Javascript
jquery select 设置默认选中的示例代码
Feb 07 #Javascript
jquery 淡入淡出效果的简单实现
Feb 07 #Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 #Javascript
做好七件事帮你提升jQuery的性能
Feb 06 #Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 #Javascript
javascript简单性能问题及学习笔记
Feb 04 #Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
简单了解python中对象的取反运算符
2019/07/01 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
技校个人求职信范文
2014/01/25 职场文书
有关爱国演讲稿
2014/05/07 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers