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 相关文章推荐
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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
PHP实现ftp上传文件示例
2014/08/21 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
八项规定整改措施
2014/02/12 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
刑事撤诉申请书
2015/05/18 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
党员心得体会范文2016
2016/01/23 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书