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 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
node错误处理与日志记录的实现
Dec 24 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python入门教程 python入门神图一张
2018/03/05 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python多线程并发实例及其优化
2019/06/27 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
如何用python免费看美剧
2020/08/11 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
护理专业自荐信
2013/12/03 职场文书
辩论赛主持词
2014/03/18 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
戒赌保证书
2015/05/11 职场文书
历史博物馆观后感
2015/06/05 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL