基于javascript实现listbox左右移动

2019-11-20 10:39:42

字体：大中小

来源：转载

供稿：网友

本文实例讲解了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判断DIV内容是否为空的方法

下一篇：关于获取DIV内部内容报错的原因分析及解决办法