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 事件绑定函数代码
Apr 28 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
js Dialog 实践分享
Oct 22 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
Node.js插件安装图文教程
May 06 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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实现异步调用方法研究与分享
2011/10/27 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
JQuery live函数
2010/12/24 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
JQuery球队选择实例
2015/05/18 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
javascript实现简易计算器
2017/02/01 Javascript
tab栏切换原理
2017/03/22 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
企业口号大全
2014/06/12 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
毕业生党员个人总结
2015/02/14 职场文书
元旦主持词开场白
2015/05/29 职场文书