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 相关文章推荐
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
JS前端笔试题分析
Dec 19 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
分享经典的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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php计算函数执行时间的方法
2015/03/20 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
Python全局变量操作详解
2015/04/14 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
计算机专业个人简短的自我评价
2013/10/23 职场文书
行政专员岗位职责
2014/01/02 职场文书
大学生表扬信范文
2014/01/09 职场文书
校园活动策划书范文
2014/01/10 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫