jQuery实现两个select控件的互移操作


Posted in Javascript onDecember 22, 2016

一、直接上代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>index</title>
</head>
<body>
 <div>
 <select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 </select>
 <span style="top: 30px; position: fixed;">
 <input type="button" value="<<" id="btnLeft" />
 <input type="button" value=">>" id="btnRight" />
 </span>
 <select id="rightSelector" multiple="multiple" name="SmsListOnRight" style="height:100px; width:50px; margin-left:80px">
 <option value="6">A</option>
 <option value="7">B</option>
 <option value="8">C</option>
 <option value="9">D</option>
 <option value="10">E</option>
 </select>
 </div>
 <br>
 <input type="button" onclick="selectAll()" id="btnSelectAll" value="selectAll" />
 <script src="js/jquery-2.1.4.js"></script>
 <script>
 $("#btnRight").click(function () {
 //数据option选中的数据集合赋值给变量vSelect
 var vSelect = $("#leftSelector option:selected");
 //克隆数据添加到 rightSelector 中
 vSelect.clone().appendTo("#rightSelector");
 //同时移除 leftSelector 中的 option
 vSelect.remove();
 });
 //right move
 $("#btnLeft").click(function () {
 var vSelect = $("#rightSelector option:selected");
 vSelect.clone().appendTo("#leftSelector");
 vSelect.remove();
 });
 function selectAll() {
 var lst1 = window.document.getElementById("rightSelector");
 var length = lst1.options.length;
 for (var i = 0; i < length; i++) {
 var v = lst1.options[i].value; //option内的value
 var t = lst1.options[i].text; //显示的文本
 alert(v + ":" + t);
 }
 }
 </script>
</body>
</html>

二、效果图

jQuery实现两个select控件的互移操作

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
js动态创建标签示例代码
Jun 09 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
实用的Vue开发技巧
May 30 Javascript
JS 调用微信扫一扫功能
Dec 22 #Javascript
Vue实现双向绑定的方法
Dec 22 #Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 #Javascript
Vue.js双向绑定实现原理详解
Dec 22 #Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 #Javascript
JS实现的简单轮播图运动效果示例
Dec 22 #Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 #Javascript
You might like
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
python之import机制详解
2014/07/03 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
python保存字符串到文件的方法
2015/07/01 Python
python中logging库的使用总结
2017/10/18 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
生物技术研究生自荐信
2013/11/12 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
会议开幕词
2015/01/28 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS