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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
python通过ssh-powershell监控windows的方法
2015/06/02 Python
用Python实现KNN分类算法
2017/12/22 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
批评与自我批评材料
2014/02/15 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
党支部三会一课计划
2014/09/24 职场文书
小学班主任事迹材料
2014/12/17 职场文书
导师鉴定意见
2015/06/05 职场文书
董存瑞观后感
2015/06/11 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android