基于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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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
You might like
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
英文导游欢迎词
2014/01/11 职场文书
霸王洗发水广告词
2014/03/14 职场文书
村党支部换届选举方案
2014/05/02 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
财务管理专业求职信
2014/06/11 职场文书
实习生工作证明范本
2014/09/14 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书