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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
vue.js开发环境搭建教程
May 04 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP 采集获取指定网址的内容
2010/01/05 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
深入浅析Python的类
2018/06/22 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
shell程序中如何注释
2012/01/28 面试题
广告学专业推荐信范文
2013/11/23 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
南京大屠杀观后感
2015/06/02 职场文书
公司董事任命书
2015/09/21 职场文书
保险公司增员口号
2015/12/25 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
JavaScript原型链详解
2021/11/07 Javascript
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android