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 得到文件后缀(通过正则实现)
Jul 08 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
JS根据生日算年龄的方法
May 05 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Vue组件化开发思考
Feb 02 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 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
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python下10个简单实例代码
2017/11/15 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python绘制雪景图
2019/12/16 Python
python中round函数如何使用
2020/06/19 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
应聘自荐信
2013/12/14 职场文书
医学生自我评价
2014/01/27 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
全国助残日活动总结
2015/05/11 职场文书
大国崛起观后感
2015/06/02 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server