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封装的不错的选项卡效果代码
Feb 15 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
js+css实现红包雨效果
Jul 12 Javascript
vue模块移动组件的实现示例
May 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字符串过滤与替换小结
2015/01/26 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
动态表格Table类的实现
2009/08/26 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python文件去除注释的方法
2015/05/25 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python读大数据txt
2016/03/28 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
学校三八妇女节活动情况总结
2014/03/09 职场文书
公司门卫岗位职责
2014/03/15 职场文书
汽修专业自荐信
2014/07/07 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
务虚会发言材料
2014/12/25 职场文书
实习介绍信模板
2015/01/30 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
创业计划书之酒店
2019/08/30 职场文书