基于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被移走后长度变小，导致后面循环终止，出现begvar oplength=option.length;var secondSel = document.getElementById（"second"）;for（i=0;i<oplength;i++）{/* selectedIndex: 该下标返回下拉列表的索引值 注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个如果没有被选中的情况下，返回-1selectedIndex是<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被移走后长度变小，导致后面循环终止，出现begvar 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被移走后长度变小，导致后面循环终止，出现begvar 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被移走后长度变小，导致后面循环终止，出现begvar oplength=option.length;for（i=0;i<oplength;i++）{/* selectedIndex: 该下标返回下拉列表的索引值 注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个如果没有被选中的情况下，返回-1selectedIndex是<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被移走后长度变小，导致后面循环终止，出现begvar 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被移走后长度变小，导致后面循环终止，出现begvar 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程序设计有所帮助。