<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合列表框</title>
<script language="javascript" type="text/javascript">
// 对下拉框信息进行初始化
function init(){
var options = new Array(10);//初始化十个选项
for(i = 0;i<10;i++)
{
options[i] = "选项"+(i+1);
}
s1.length=10;
for(i = 0;i<10;i++)
{
s1.options[i].value=i+1;
s1.options[i].text=options[i];
}
}
// 把选中的选项移动到右边
function move(s1,s2){
// 判断是否有选择项
index = s1.selectedIndex
if(index==-1)
alert("没有选择");
else{
// 修改s2,把s1中选中的选项添加到s2中
s2.length++;
s2.options[s2.length-1].value = s1.options[index].value;
s2.options[s2.length-1].text= s1.options[index].text;
// 删除s1中被选择的选项
s1.remove(index);
}
}
// 把所有选项移动到右边
function moveAll(s1,s2){
// 判断是否有选择项
if(s1.length == 0){
alert("没有可用选择");
}
// 把s1中的选项添加到s2中
s2.length = s1.length + s2.length;
for(i=0;i<s1.length;i++){
s2.options[s2.length-s1.length+i].value=s1.options[i].value;
s2.options[s2.length-s1.length+i].text=s1.options[i].text;
}
// 清空s1
s1.length = 0;
}
</script>
<style type="text/css">
input {width =40}
</style>
</head>
<body οnlοad="init()">
<table>
<tr>
<td>
<select name="s1" size=10 style="width:100">
</select>
</td>
<td>
<input type="button" name="moveToRight" value=">" style="width:50px" onClick="move(s1,s2)">
<br>
<input type="button" name="moveAllToRight" value=">>" style="width:50px" onClick="moveAll(s1,s2)">
<br>
<input type="button" name="moveToLeft" value="<" style="width:50px" onClick="move(s2,s1)">
<br>
<input type="button" name="moveAllToLeft" value="<<" style="width:50px" onClick="moveAll(s2,s1)">
<br>
</td>
<td>
<select name="s2" size=10 style="width: 100">
</select>
</td>
</tr>
</table>
</body>
</html>
转载于:https://www.cnblogs.com/lbl-1998/p/9709489.html