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 parseInt 大改造
Sep 27 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 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(一)
2006/10/09 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
基于PHP文件操作的详解
2013/06/05 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
javascript创建和存储cookie示例
2014/01/07 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python使用pymysql实现操作mysql
2016/09/13 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
外企办公室竞聘演讲稿
2013/12/29 职场文书
校园新闻广播稿
2014/01/10 职场文书
学员自我鉴定
2014/03/19 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
婚宴新娘致辞
2015/07/28 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
java开发双人五子棋游戏
2022/05/06 Java/Android