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 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
vue双向绑定简要分析
Mar 23 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
Layui Table js 模拟选中checkbox的例子
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
其他功能
2006/10/09 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
wxpython绘制音频效果
2019/11/18 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
如何利用python 读取配置文件
2021/01/06 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
三八节主持词
2014/03/17 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014年政教处工作总结
2014/12/20 职场文书
行政文员岗位职责
2015/02/04 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
Python 实现Mac 屏幕截图详解
2021/10/05 Python