JQuery select标签操作代码段


Posted in Javascript onMay 16, 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,可以先看它的文档。

Javascript 相关文章推荐
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
javascript的this关键字详解
May 20 Javascript
vue路由教程之静态路由
Sep 03 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 #Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 #Javascript
WEB 浏览器兼容 推荐收藏
May 14 #Javascript
js 数值项目的格式化函数代码
May 14 #Javascript
IE8 中使用加速器(Activities)
May 14 #Javascript
jquery 日期分离成年月日的代码
May 14 #Javascript
JQuery 操作select标签实现代码
May 14 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php cookies中删除的一般赋值方法
2011/05/07 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python中list初始化方法示例
2016/09/18 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
django使用JWT保存用户登录信息
2020/04/22 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
C语言笔试题回忆
2015/04/02 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
学生会竞选演讲稿
2014/04/24 职场文书
党章培训心得体会
2014/09/04 职场文书
借款协议书
2014/09/16 职场文书
工作服管理制度范本
2015/08/06 职场文书
详细介绍python类及类的用法
2021/05/31 Python
基于Go语言构建RESTful API服务
2021/07/25 Golang