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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
高性能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数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python字典操作简明总结
2015/04/13 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python mock测试的示例
2020/10/19 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
外出培训学习心得体会
2016/01/18 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python