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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
详解Vue2 添加对scss的支持
Jan 02 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缓存机制Output Control详解
2014/07/14 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
PyQt5实现拖放功能
2018/04/25 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
python远程连接MySQL数据库
2019/04/19 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python检测服务器端口代码实例
2019/08/31 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
使用Python实现批量ping操作方法
2020/05/06 Python
python语言的优势是什么
2020/06/17 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
学校门卫管理制度
2014/01/30 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js