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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
vue.js表格分页示例
Oct 18 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
原生JS实现不断变化的标签
May 22 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
python 两个数据库postgresql对比
2019/10/21 Python
如何使用python进行pdf文件分割
2019/11/11 Python
商务日语专业毕业生求职信
2013/10/26 职场文书
护士毕业生自荐信
2014/02/07 职场文书
企业军训感言
2014/02/08 职场文书
王老吉广告词
2014/03/20 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
信用卡工资证明格式
2014/09/13 职场文书
荆州古城导游词
2015/02/06 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python