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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this

18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다