首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于javascript实现listbox左右移动

Posted in Javascript onJanuary 29, 2016

本文实例讲解了javascript实现listbox左右移动的详细代码，分享给大家供大家参考，具体内容如下

效果图：

基于javascript实现listbox左右移动

具体代码：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>listbox左右移动</title> 
</head> 
 
<body> 
 
<div style="background-color:#CCC; width:450px; height:300px; margin:150px,0,0,450px; border:1px solid"> 
  <table align="center" width="285" height="169" bgcolor="#99CCFF"> 
  <tr> 
   <td width="100"> 
    <select name="first" id="first" size="10" multiple="multiple" style="background-color:#3FC;"> 
     <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> 
     <option value="选项6">选项6</option> 
     <option value="选项7">选项7</option> 
     <option value="选项8">选项8</option> 
    </select> 
   </td> 
   <td width="85" valign="middle"> 
    <input name="add" id="add" type="button" value="--->"/> 
    <input name="add_all" id="add_all" type="button" value="===>"/> 
    <input name="remove" id="remove" type="button" value="<---"/> 
    <input name="remove_all" id="remove_all" type="button" value="<==="/> 
   </td> 
   <td width="100" align="left"> 
    <select name="second" id="second" size="10" multiple="multiple" style="background-color:#3FC;"> 
    <option value="选项9">选项9</option> 
    </select> 
   </td> 
  </tr> 
  </table> 
</div> 
 
</body> 
<script type="text/javascript"> 
 //左移右 
  
  /*<input name="add" id="add" type="button" value="--->"/>*/ 
  document.getElementById("add").onclick = function add() 
  { 
   var firstSel = document.getElementById("first"); 
   var option = firstSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   var secondSel = document.getElementById("second"); 
   for(i=0;i<oplength;i++) 
   { 
     /* 
      selectedIndex: 该下标返回下拉列表的索引值 
      注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个 
         如果没有被选中的情况下，返回-1 
         selectedIndex是<select>的属性 
     */ 
     if(firstSel.selectedIndex!=-1) 
     { 
       secondSel.appendChild(option[firstSel.selectedIndex]); 
     } 
   } 
    
  } 
   
  /*<input name="add_all" id="add_all" type="button" value="===>"/>*/ 
  document.getElementById("add_all").onclick = function addAll() 
  { 
   var firstSel = document.getElementById("first"); 
   var option = firstSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   var secondSel = document.getElementById("second"); 
   for(i=0;i<oplength;i++) 
   { 
    /*因为javascript的数组是动态数组，长度是可以变的。所以当移走全部把数 
    组的值移走（一个一个的移走，数组长度马上-1，所以数组下标也是-1.因次我们要把每次移的是走下标为0的那个 
    数，这样才保证可以全部移走）*/ 
    secondSel.appendChild(option[0]); 
   } 
  } 
   
  /*双击后把option移到右边*/ 
  document.getElementById("first").ondblclick = function dblclick() 
  { 
    /*方法一*/ 
    /* 
   var firstSel = document.getElementById("first"); 
   var option = firstSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   var secondSel = document.getElementById("second"); 
   for(i=0;i<oplength;i++) 
   { 
      //双击可以看成：第一次点击选中，第二次点击移动 
      secondSel.appendChild(option[firstSel.selectedIndex]);   
   } 
   */ 
    
   /*方法二*/ 
   /* 
   this: this表示document.getElementById("first")  下拉列表 
      this.selectedIndex表示下拉列表选中的项 
   */ 
    var secondSel = document.getElementById("second"); 
    secondSel.appendChild(this[this.selectedIndex]); 
  } 
   
   
   
   
  //右移左 
   
   
  /*<input name="remove" id="remove" type="button" value="<---"/>*/ 
  document.getElementById("remove").onclick = function remove() 
  { 
   var secondSel = document.getElementById("second"); 
   var firstSel = document.getElementById("first"); 
   var option = secondSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   for(i=0;i<oplength;i++) 
   { 
     /* 
      selectedIndex: 该下标返回下拉列表的索引值 
      注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个 
         如果没有被选中的情况下，返回-1 
         selectedIndex是<select>的属性 
     */ 
     if(secondSel.selectedIndex!=-1) 
     { 
       firstSel.appendChild(option[secondSel.selectedIndex]); 
     } 
   } 
    
  } 
   
  /*<input name="remove_all" id="remove_all" type="button" value="<==="/>*/ 
  document.getElementById("remove_all").onclick = function remove_all() 
  { 
   var secondSel = document.getElementById("second"); 
   var firstSel = document.getElementById("first"); 
   var option = secondSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   for(i=0;i<oplength;i++) 
   { 
    /*因为javascript的数组是动态数组，长度是可以变的。所以当移走全部把数 
    组的值移走（一个一个的移走，数组长度马上-1，所以数组下标也是-1.因次我们要把每次移的是走下标为0的那个 
    数，这样才保证可以全部移走）*/ 
    firstSel.appendChild(option[0]); 
   } 
  } 
   
  /*双击后把option移到右边*/ 
  document.getElementById("second").ondblclick = function dblclick() 
  { 
    /*方法一*/ 
    /* 
   var secondSel = document.getElementById("second"); 
   var firstSel = document.getElementById("first"); 
   var option = secondSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   for(i=0;i<oplength;i++) 
   { 
      //双击可以看成：第一次点击选中，第二次点击移动 
      firstSel.appendChild(option[secondSel.selectedIndex]);   
   } 
   */ 
    
   /*方法二*/ 
   /* 
   this: this表示document.getElementById("second")  下拉列表 
      this.selectedIndex表示下拉列表选中的项 
   */ 
    var firstSel = document.getElementById("first"); 
    firstSel.appendChild(this[this.selectedIndex]); 
  } 
</script> 
</html>

代码注释很详细，希望可以帮到大家。

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

基于javascript实现listbox左右移动

- Author -

沸羊羊一个

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
超级退弹代码
Jul 07 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
javaScript中封装的各种写法示例（推荐）
Jul 03 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 #Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 #Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 #Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 #Javascript
javascript实现tab响应式切换特效
Jan 29 #Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 #Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 #Javascript
主题(1) Spring Data JPA(4) JAVA(88) 线程池(1) Repository接口(3) ForkJoin(1) 池化技术(1) Android(19) FutureTask(3) Springboot-cli(1)
You might like
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP 转义使用详解
2013/07/15 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
两种WEB下的模态对话框 （asp.net或js的分别实现）
2009/12/02 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
回调函数的意义以及python实现实例
2017/06/20 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Pandas将列表（List）转换为数据框（Dataframe）
2020/04/24 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Django权限设置及验证方式
2020/05/13 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
python raise的基本使用
2020/09/10 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
用python计算文件的MD5值
2020/12/23 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
高三家长寄语
2014/04/03 职场文书
廉洁自律证明
2015/06/24 职场文书
股东出资协议书
2016/03/21 职场文书
会议主持词通用版
2019/04/02 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技