jquery实现select选择框内容左右移动代码分享


Posted in Javascript onNovember 21, 2015

本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下:
select选择框内容左右移动,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,运行效果图:

jquery实现select选择框内容左右移动代码分享

具体代码如下

<!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>

希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
分享经典的JavaScript开发技巧
Nov 21 #Javascript
jQuery实现分隔条左右拖动功能
Nov 21 #Javascript
超详细的javascript数组方法汇总
Nov 21 #Javascript
javascript实现动态统计图开发实例
Nov 21 #Javascript
js实现索引图片切换效果
Nov 21 #Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 #Javascript
javascript实现Email邮件显示与删除功能
Nov 21 #Javascript
You might like
php语言流程控制中的主动与被动
2012/11/05 PHP
重新认识php array_merge函数
2014/08/31 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
jQuery实现弹出层效果
2019/12/10 jQuery
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python中str.format()详解
2017/03/12 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
公司合作意向书范文
2014/07/30 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
五年级作文之成长
2019/09/16 职场文书