JS 2 단 연동 다 중 선택 상자

  
  
  
  

   
   
   
   
<html> 
   
   
   
   
<head> 
   
   
   
   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
   
   
   
   
<script language="JavaScript"> 
   
   
   
   
<!-- 
   
   
   
   
function addSrcToDestList() { 
   
   
   
   
destList = window.document.forms[0].destList; 
   
   
   
   
srcList = window.document.forms[0].srcList; 
   
   
   
   
var len = destList.length; 
   
   
   
   
for(var i = 0; i < srcList.length; i++) { 
   
   
   
   
if ((srcList.options[i] != null) && (srcList.options[i].selected)) { 
   
   
   
   
var found = false; 
   
   
   
   
for(var count = 0; count < len; count++) { 
   
   
   
   
if (destList.options[count] != null) { 
   
   
   
   
if (srcList.options[i].text == destList.options[count].text) { 
   
   
   
   
found = true; 
   
   
   
   
break; 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
if (found != true) { 
   
   
   
   
destList.options[len] = new Option(srcList.options[i].text); 
   
   
   
   
len++; 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
function deleteFromDestList() { 
   
   
   
   
var destList = window.document.forms[0].destList; 
   
   
   
   
var len = destList.options.length; 
   
   
   
   
for(var i = (len-1); i >= 0; i--) { 
   
   
   
   
if ((destList.options[i] != null) && (destList.options[i].selected == true)) { 
   
   
   
   
destList.options[i] = null; 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
 
   
   
   
   
var array=new Array(); 
   
   
   
   
array[0]='<option value="     ">     </option><option value="       ">       </option>' 
   
   
   
   
array[1]='<option value="     ">     </option>' 
   
   
   
   
array[2]='<option value="      ">      </option>' 
   
   
   
   
array[3]='<option value="       ">       </option><option value="     ">     </option>' 
   
   
   
   
 
   
   
   
   
function change(w){ 
   
   
   
   
 str='<select style="width:100;font-size:13px" size="5" name="srcList" multiple onchange="javascript:addSrcToDestList()">'  
   
   
   
   
 str+=array[w] 
   
   
   
   
 str+='</select>' 
   
   
   
   
    sList.innerHTML=str 
   
   
   
   
} 
   
   
   
   
</SCRIPT> 
   
   
   
   
</head> 
   
   
   
   
 
   
   
   
   
<body> 
   
   
   
   
<center> 
   
   
   
   
<form method="POST"> 
   
   
   
   
<table bgcolor="#FFFFCC"> 
   
   
   
   
<tr> 
   
   
   
   
<td align="center"> 
   
   
   
   
     : 
   
   
   
   
</td> 
   
   
   
   
<td> 
   
   
   
   
     : 
   
   
   
   
</td> 
   
   
   
   
</tr> 
   
   
   
   
<tr> 
   
   
   
   
<td bgcolor="#FFFFCC" width="400"> 
   
   
   
   
<select style='width:100;font-size:13px' id="subList" size="5" name="subList" multiple onchange="javascript:change(subList.value);event.cancelBubble=true;return false"> 
   
   
   
   
<option value="0">   </option> 
   
   
   
   
<option value="1">   </option> 
   
   
   
   
<option value="2">   </option> 
   
   
   
   
<option value="3">   </option> 
   
   
   
   
<option value="4">    </option> 
   
   
   
   
<option value="5">   </option> 
   
   
   
   
</select> 
   
   
   
   
<span id="sList"> 
   
   
   
   
<select style='width:100;font-size:13px' size="5" name="srcList" multiple onchange="javascript:addSrcToDestList()"> 
   
   
   
   
</select> 
   
   
   
   
</span> 
   
   
   
   
</td> 
   
   
   
   
<td bgcolor="#FFFFCC" width="69"> 
   
   
   
   
<select style='width:100;font-size:13px' size="5" name="destList" multiple> 
   
   
   
   
</select> 
   
   
   
   
</td> 
   
   
   
   
</tr> 
   
   
   
   
<tr> 
   
   
   
   
<td colspan="3" align="center">&nbsp; 
   
   
   
   
</td> 
   
   
   
   
</tr> 
   
   
   
   
<tr> 
   
   
   
   
<td align="center"> 
   
   
   
   
<input type="button" value="    " onclick=""> 
   
   
   
   
</td> 
   
   
   
   
<td> 
   
   
   
   
<input type="button" value="       " onclick="javascript:deleteFromDestList();"> 
   
   
   
   
</td> 
   
   
   
   
</tr> 
   
   
   
   
</table> 
   
   
   
   
</form> 
   
   
   
   
</body> 
   
   
   
   
</html>