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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
js实现下一页页码效果
Mar 07 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
angular directive的简单使用总结
May 24 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue iview实现动态新增和删除
Jun 17 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP 类型转换函数intval
2009/06/20 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
5款实用的python 工具推荐
2020/10/13 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
Ejb技术面试题
2015/04/29 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
自荐信如何制作?
2014/02/21 职场文书
旅游安全协议书
2014/04/21 职场文书
交通事故和解协议书
2015/01/27 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python