模板
教程
环境
性能
功能
管理
下拉列表框1<=>下拉列表框2(HTML版)
发表于：2007-06-30来源：作者：点击数：
标签：
select.htm 说明： 本程式支持Shift和Ctrl功能！（即：连选和跳选多项Option） 可以任意的相互操作（下拉列表框1=下拉列表框2）！ html head META content=text/html; charset=gb2312 http-equiv=Content-Type link rel=stylesheet href=common.css /head bod
select.htm说明：
本程式支持Shift和Ctrl功能！（即：连选和跳选多项Option）
可以任意的相互操作（下拉列表框1<=>下拉列表框2）！
<html>
<head>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<link rel="stylesheet" href="common.css">
</head>
<body bgColor=skyblue>
<form action="select.htm" method="post" name="myform">
<br><br><br>
<div align="center"><center><left>
<table style="FONT-SIZE: smaller">
<tr><td>
<table>
<tr><td>
<select name="left_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
<OPTION VALUE="A">A</OPTION><OPTION VALUE="B">B</OPTION>
<OPTION VALUE="C">C</OPTION><OPTION VALUE="D">D</OPTION>
<OPTION VALUE="E">E</OPTION><OPTION VALUE="F">F</OPTION>
<OPTION VALUE="G">G</OPTION><OPTION VALUE="H">H</OPTION>
<OPTION VALUE="I">I</OPTION><OPTION VALUE="J">J</OPTION>
<OPTION VALUE="K">K</OPTION><OPTION VALUE="L">L</OPTION>
<OPTION VALUE="M">M</OPTION><OPTION VALUE="N">N</OPTION>
<OPTION VALUE="O">O</OPTION><OPTION VALUE="P">P</OPTION>
</select>
</td></tr>
</table>
</td><td>
<table border="0">
<br><br>
<tr><td>
<INPUT language="javascript" name="btn_select_addany" onclick="fun_select_addany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add any" type=button value="8"></td></tr><tr><td>
<INPUT language="javascript" name="btn_select_addall" onclick="fun_select_addall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add all" type=button value=: DESIGNTIMESP="17713"></td></tr><tr><td>
<br><br></td></tr><tr><td>
<INPUT language="javascript" name="btn_select_dltany" onclick="fun_select_dltany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete any" type=button value="7"></td></tr><tr><td>
<INPUT language="javascript" name="btn_select_dltall" onclick="fun_select_dltall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete all" type=button value="9"></td></tr>
<tr><td></td></tr>
<tr><td>
</td></tr>
</table></TD><td>
<table style="FONT-SIZE: smaller">
<tr><td>
<select name="right_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
</select>
</td></tr>
</table>
</td></TR></TBODY></TABLE></div></CENTER>
</form>
</body>
</html>
<script language="javascript">
function fun_select_addany(theform){
var i;
for (i=0;i<theform.left_select.length;i++){
if (theform.left_select.options[i].selected == true){
if (theform.left_select.options[i].text !=""){
theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
theform.left_select.options[i] =new Option("");
}
}
}
for (i=0;i<theform.left_select.length;i++){
if (theform.left_select.options[i].text ==""){theform.left_select.options.remove(i); i--;}
}
}
function fun_select_addall(theform){
var i;
for (i=0;i<theform.left_select.length;i++){
if (theform.left_select.options[i].text !=""){
theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
}
}
theform.left_select.length=0;
}
function fun_select_dltany(theform){
var i;
for (i=0;i<theform.right_select.length;i++){
if (theform.right_select.options[i].selected == true){
if (theform.right_select.options[i].text !=""){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
theform.right_select.options[i] =new Option("");
}
}
}
for (i=0;i<theform.right_select.length;i++){
if (theform.right_select.options[i].text ==""){theform.right_select.options.remove(i);i--;}
}
}
function fun_select_dltall(theform){
var i;
for (i=0;i<theform.right_select.length;i++){
if (theform.right_select.options[i].text !=""){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
}
}
theform.right_select.length=0;
}
</script>
