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 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
javascript实现前端分页效果
Jun 24 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
node实现基于token的身份验证
2018/04/09 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
在Python下尝试多线程编程
2015/04/28 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python中 logging的使用详解
2017/10/25 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
外语专业毕业生自我评价分享
2013/10/05 职场文书
职业规划书如何设计?
2014/01/09 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
检讨书格式
2019/04/25 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
Android中View.post和Handler.post的关系
2022/06/05 Java/Android