JQuery 操作select标签实现代码


Posted in Javascript onMay 14, 2010

下面几个常用的代码或许对您有帮助:

//1.获取选中option值 
$('#selectList').val(); 
//2.获取选中option的文本 
$('#selectList :selected').text(); 
//3.获取多个选中option值、文本 
var foo = []; 
$('#multiple :selected').each(function(i, selected) { 
foo[i] = $(selected).text(); 
}); 
// to get the selected values, just use .val() - this returns a string or array 
foo = $('#multiple :selected').val(); 
//4.使用选项option的条件表达式 
switch ($('#selectList :selected').text()) { 
case 'First Option': 
//do something 
break; 
case 'Something Else': 
// do something else 
break; 
} 
//5.删除某个value=2的option 
$("#selectList option[value='2']").remove(); 
//6.从list A 移动option到 list B. 
// here we have 2 select lists and 2 buttons. If you click the “add” button, 
// we remove the selected option from select1 and add that same option to select2. 
// The “remove” button just does things the opposite way around. 
// Thanks to jQuery's chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code. 
$().ready(function() { 
$('#add').click(function() { 
return !$('#select1 option:selected').appendTo('#select2'); 
}); 
$('#remove').click(function() { 
return !$('#select2 option:selected').appendTo('#select1'); 
}); 
});

如果您不了解JQuery,可以先看它的文档。

希望这篇POST对您有帮助。

Javascript 相关文章推荐
javascript中的array数组使用技巧
Jan 31 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 #Javascript
js 图片等比例缩放代码
May 13 #Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 #Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 #Javascript
JavaScript prototype属性使用说明
May 13 #Javascript
js 实现复制到粘贴板的功能代码
May 13 #Javascript
js href的用法
May 13 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php 页面执行时间计算代码
2008/12/04 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
修改发贴的编辑功能
2007/03/07 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
python爬虫 正则表达式解析
2019/09/28 Python
python对execl 处理操作代码
2020/06/22 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
学习型党组织建设经验材料
2014/05/26 职场文书
经理助理岗位职责
2015/02/02 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
水浒传读书笔记
2015/06/25 职场文书
外科护士长工作总结
2015/08/12 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
JavaScript 对象创建的3种方法
2021/11/17 Javascript