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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
php中explode与split的区别介绍
2012/10/03 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
js+xml生成级联下拉框代码
2012/07/24 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python转码问题的解决方法
2008/10/07 Python
python使用marshal模块序列化实例
2014/09/25 Python
Python实现简单字典树的方法
2016/04/29 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python绘制圆柱体的方法
2018/07/02 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
技校生自我鉴定
2013/12/08 职场文书
《中华少年》教学反思
2014/02/15 职场文书
学校春季防火方案
2014/06/08 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
微信早安问候语
2015/11/10 职场文书