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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP中echo和print的区别
2014/08/28 PHP
php生成圆角图片的方法
2015/04/07 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
python字符串连接方法分析
2016/04/12 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python画图常规设置方式
2020/03/05 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
买卖协议书范本
2014/04/21 职场文书
西游记读书笔记
2015/06/25 职场文书
2015年暑假工作总结
2015/07/13 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python