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 相关文章推荐
js innerHTML 改变div内容的方法
Aug 03 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
JS中的作用域链
Mar 01 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
移动节点的jquery代码
2014/01/13 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
理解Python中的With语句
2015/02/02 Python
python计算圆周率pi的方法
2015/07/11 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python3模拟登录操作实例分析
2019/03/12 Python
pandas删除指定行详解
2019/04/04 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python默认参数调用方法解析
2020/02/09 Python
学生励志演讲稿
2014/01/06 职场文书
活动总结结尾怎么写
2014/08/30 职场文书