jquery控制select的text/value值为选中状态


Posted in Javascript onJune 03, 2014

每一次操作select的时候,总是要在网上翻下,太繁琐了,自己在这里总结下。

比如<select class="selector"></select>

1、设置value为“全部“的项选中

$(".selector").val("全部");

2、设置text为“全部“的项选中
$(".selector").find("option[text='全部']").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 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
详解vue中移动端自适应方案
May 05 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 #Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 #Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 #Javascript
php+js实现倒计时功能
Jun 02 #Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 #Javascript
node.js入门教程
Jun 01 #Javascript
什么是Node.js?Node.js详细介绍
Jun 01 #Javascript
You might like
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
详解python的ORM中Pony用法
2018/02/09 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
什么是python的必选参数
2020/06/21 Python
python操作链表的示例代码
2020/09/27 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
法学院方阵解说词
2014/01/29 职场文书
三个儿子教学反思
2014/02/03 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014年减负工作总结
2014/12/10 职场文书
小学语文复习计划
2015/01/19 职场文书
男方婚礼答谢词
2015/01/20 职场文书
收入证明范本
2015/06/12 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis