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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
原生js实现弹幕效果
Nov 29 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 Document 代码注释规范
2009/04/13 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
JS跨域问题详解
2014/11/25 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python中的两个内置模块介绍
2015/04/05 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
迅雷Cued工作心得体会
2014/01/27 职场文书
信访工作经验交流材料
2014/05/23 职场文书
低碳环保标语
2014/06/12 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers