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 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
js实现抽奖效果
Mar 27 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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学习(二)
2006/10/09 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
numpy添加新的维度:newaxis的方法
2018/08/02 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
歌唱比赛主持词
2014/03/18 职场文书
亲属关系公证书
2014/04/08 职场文书
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
Hive HQL支持2种查询语句风格
2022/06/25 数据库