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 相关文章推荐
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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实现懒加载的方法
2015/03/07 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Gird事件机制初级读本
2007/03/10 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
python time模块用法实例详解
2014/09/11 Python
简单理解Python中的装饰器
2015/07/31 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python小进度条显示代码
2019/03/05 Python
python视频按帧截取图片工具
2019/07/23 Python
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
农行实习自我鉴定
2013/09/22 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
交通文明倡议书
2014/05/16 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
师德师风剖析材料
2014/09/30 职场文书
售后服务质量承诺书
2015/04/29 职场文书
简单的辞职信模板
2015/05/12 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS