组合列表框

青旅半醒 2022-01-12 02:29 177阅读 0赞

<!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