multi select box...item move

출처 : http://javacool.net/

 

<!-- 사용자 설정 -->
<script language="Javascript">
<!--
 function ClearList(OptionList, TitleName) {
  OptionList.length = 0;
 }
       
 function move(side){    
        var temp1 = new Array();
        var temp2 = new Array();
        var tempa = new Array();
        var tempb = new Array();
        var current1 = 0;
        var current2 = 0;
        var y=0;
        var attribute;
       
        if (side == "right") { 
   attribute1 = document.rep.category_name;
   attribute2 = document.rep.category_selected;
        } else { 
   attribute1 = document.rep.category_selected;
   attribute2 = document.rep.category_name; 
        }

        for (var i = 0; i < attribute2.length; i++) { 
   y=current1++
   temp1[y] = attribute2.options[i].value;
   tempa[y] = attribute2.options[i].text;
        }

        for (var i = 0; i < attribute1.length; i++) {  
   if ( attribute1.options[i].selected ) { 
    y=current1++
    temp1[y] = attribute1.options[i].value;
    tempa[y] = attribute1.options[i].text;
   } else { 
    y=current2++
    temp2[y] = attribute1.options[i].value;
    tempb[y] = attribute1.options[i].text;
   }
        }

        for (var i = 0; i < temp1.length; i++) { 
   attribute2.options[i] = new Option();
   attribute2.options[i].value = temp1[i];
   attribute2.options[i].text =  tempa[i];
        }

        ClearList(attribute1,attribute1);

  if (temp2.length>0) {       
   for (var i = 0; i < temp2.length; i++) {  
    attribute1.options[i] = new Option();
    attribute1.options[i].value = temp2[i];
    attribute1.options[i].text =  tempb[i];
   }
        }
 }

 function saveMe() {
  var strValues = "";
  var boxLength = document.rep.category_selected.length;
  var count = 0;
  
  if (boxLength != 0) {
   for (i = 0; i < boxLength; i++) {
    if (count == 0) {
     strValues = document.rep.category_selected.options[i].value;
    } else {
     strValues = strValues + "," + document.rep.category_selected.options[i].value;
    }
    count++;
   }
  }
  
  if (strValues.length == 0) {
   alert("적용할 시스템을 선택하세요.");
  } else {
   alert("선택한 시스템 :\r\n" + strValues);
  }
 }
//-->
</script>

<form name="rep" method="post">
<table width="100%" cellspacing="0">
  <tr>
 <td class="border" bgcolor="fofofo">
   <table class="none" cellspacing="2" width="100%">
  <tr>
  <!-- source 목록 -->
    <td class="none" width="45%">total manage computer<br>               
   <select name="category_name" multiple size="10" style="width=100%" width="150px" ondblclick="move('right')" >
    <option value="1">첫번째 항목</option>
                <option value="2">두번째 항목</option>
                <option value="3">세번째 항목</option>
                <option value="4">네번째 항목</option>
                <option value="5">다섯번째 항목</option>
                <option value="6">여섯번째 항목</option>
   </select>
    </td>
  <!-- 추가/삭제 버튼 -->
    <td class="none" width="10%" valign="middle" align="center">   
   <img src="../images/addarrow.gif" onclick="move('right')" style="cursor:hand">   
   <img src="../images/delarrow.gif" onclick="move('left')" style="cursor:hand">   
    </td>
  <!-- target 목록 -->
    <td class="none" width="45%">apply computer<br>               
   <select name="category_selected" multiple size="10" style="width=100%" width="150px" ondblclick="move('left')">
            </select>
    </td>
  </tr>
   </table>
 </td>
  </tr>
  <tr>
  <!-- 적용 버튼 -->
 <td class="border" bgcolor="fofofo">
   <img src="../images/apply.gif" onclick="saveMe()" style="cursor:hand">
 </td>
  </tr>
</table>
</form>