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 相关文章推荐
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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 Passport 通行证 整合笔记
2008/06/30 PHP
Wordpress php 分页代码
2009/10/21 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
vue组件jsx语法的具体使用
2018/05/21 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python的slice notation的特殊用法详解
2019/12/27 Python
如何基于python实现归一化处理
2020/01/20 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
关于打架的检讨书
2014/01/17 职场文书
九年级物理教学反思
2014/01/29 职场文书
三爱活动实施方案
2014/03/19 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书