基于javascript实现listbox左右移动
编程学习 2021-07-04 21:04www.dzhlxh.cn编程入门
这篇文章主要介绍了基于javascript实现listbox左右移动的相关资料，以一个完整的实例代码分析了js实现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程序设计有所帮助。