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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
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
使用dump函数,给php加断点测试
2013/06/25 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
python中reload重载实例用法
2020/12/15 Python
索尼巴西商店:Sony巴西
2019/06/21 全球购物
社区文艺活动方案
2014/08/19 职场文书
学校中秋节活动总结
2015/03/23 职场文书
部门主管竞聘书
2015/09/15 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书