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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jQuery实现跨域
Feb 03 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
JS二分查找算法详解
Nov 01 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
关于PHP堆栈与列队的学习
2013/06/21 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
几行js代码实现自适应
2017/02/24 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python实现经纬度采样的示例代码
2020/12/10 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
新娘父亲婚礼致辞
2014/01/16 职场文书
公益广告宣传方案
2014/02/28 职场文书
新学期决心书
2014/03/11 职场文书
银行求职信模板
2015/03/20 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers