[javascript] <select multiple > 박스끼리 데이터 주고 받고 순서 변경하기

<예제 이미지>

(+ 이미지및 디자인 파일은 함께 올리지 안아서 소스 그대로 이용이 불가능합니다. 상황에 맞게 수정해서 이용해주세요)

<htlm>

<form name = "form1" method="post" action="" enctype="multipart/form-data">

<table border="0" cellpadding="0" cellspacing="0" >

  <tr>

  <th>첫 화면 구성하기</th>

  <td>

      <div id="pageSetup">

      <li class="selectBox">

      아래의 목록에서 선택하여 추가합니다<br />

        <select multiple size="9" name='com_list'>

        <option>상담중인 나의 고객 리스트</option>

        <option>진행단계별 수속고객 현황</option>

        <option>픽업 대기자 명단</option>

        <option>Enroll 신청완료</option>

        <option>Offer 접수</option>

        <option>학비송금완료</option>

        <option>COE 수령</option>

        <option>홈스테이 신청자 및 디테일 수령자</option>

        </select>

      </li>

      <li class="buttonBox">

        <img src="/btn_move_right.gif" name="add" onClick="addCom()"><br><br>

        <img src="/btn_move_left.gif" name="remove"onClick="delCom()">

      </li>

      <li class="selectBox">

           나의 첫 화면의 목록 순서 설정 <br />

           <select multiple size="9" name="com_chs" id="com_chs" >

           </select>

      </li>

      <li class="buttonBox">

        <img src="/btn_move_up.gif" onclick="moveItem('up', 'com_chs')"  /><br><br>

        <img src="/btn_move_down.gif" onclick="moveItem('down', 'com_chs')" /> 

      </li>

      </div>

  </td>

  </tr>

</table>
</form> 

<Script> 

<Script Language="JAVASCRIPT">

function sendit(){

 var right_list = document.form1.elements["com_chs"];

 

 //B 목록의 데이터를 전송하고자 할때 list를 selected 시켜준다

 for(i=0; i<right_list.length; i++){

  right_list.options[i].selected = "true";

 }

 document.form1.action ="";

 document.form1.submit();  

}

function addCom(){

 var left_list  = document.form1.elements["com_list"];

 var right_list  = document.form1.elements["com_chs"];

    var str   = new Array();

    var str2   = new Array();

    var str3   = new Array();

    var idx   = 0;

    

   for ( i=0; i<left_list.length; i++ ){

    if( left_list.options[i].selected==true ){

     str[idx]  = left_list.options[i].value;

     str2[idx] = left_list.options[i].innerText;

     str3[idx] = left_list.options[i].index;

     idx++;

    }

   }   

   

   for ( i=0;i< str3.length;i++ ){

    left_list.remove(str3[i]-i);

   }

     

   if( right_list.length==0 ) {

    for( i=0; i<str.length; i++ ) {

     right_list.options[i] = new Option(str2[i],str[i]);

    }

   }else if( right_list.length>0 ) {

    for ( i=0; i<str.length; i++ ) {

     right_list.options[right_list.length] = new Option(str2[i],str[i]);

    }

   }

}

function delCom(){

 var right_list = document.form1.elements["com_list"];

 var left_list = document.form1.elements["com_chs"];

    var str    = new Array();

    var str2   = new Array();

    var str3   = new Array();

    var idx   = 0;

    

   for( i=0; i<left_list.length; i++ ){

    if( left_list.options[i].selected==true ){

     str[idx]  = left_list.options[i].value;

     str2[idx] = left_list.options[i].innerText;

     str3[idx] = left_list.options[i].index;

     idx++;

    }

   }   

   

   for( i=0;i< str3.length;i++ ){

    left_list.remove(str3[i]-i);

   }

     

   if( right_list.length==0 ) {

    for( i=0; i<str.length; i++ ) {

     right_list.options[i] = new Option(str2[i],str[i]);

    }

   }else if( right_list.length>0 ) {

    for( i=0; i<str.length;i++ ) {

     right_list.options[right_list.length] = new Option(str2[i],str[i]);

    }

   }

}

// 순서 변경 스크립트

    function moveItem(goto, elementId) {

        var element = document.getElementById(elementId);  // Multiple Select Element

        var selIndex = element.selectedIndex;              // Selected Index

        var elementLength = element.options.length;        // Select Element Item Length

        var selText = element.options[selIndex].text;      // Selected Item Text

        var selValue = element.options[selIndex].value;    // Selected Item Value

        if(selIndex < 0) {

            alert("선택해 주세요.");

            return;

        }

        if(goto == "top") {  // 최상위로 이동

            var index = selIndex;

            while(index > 0) {

                element.options[index].text = element.options[index-1].text;

                element.options[index].value = element.options[index-1].value;

                index--;

            }

            element.options[0].text = selText;

            element.options[0].value = selValue;

            element.selectedIndex = 0;

        } else if(goto == "up") {  // 위로 이동

            if(selIndex-1 < 0) return;

            var oldText = element.options[selIndex-1].text;

            var oldValue = element.options[selIndex-1].value;

            element.options[selIndex-1].text = selText;

            element.options[selIndex-1].value = selValue;

            element.options[selIndex].text = oldText;

            element.options[selIndex].value = oldValue;

            element.selectedIndex = selIndex-1;

        } else if(goto == "down") {  // 아래로 이동

            if(selIndex+2 > elementLength) return;

            var oldText = element.options[selIndex+1].text;

            var oldValue = element.options[selIndex+1].value;

            element.options[selIndex+1].text = selText;

            element.options[selIndex+1].value = selValue;

            element.options[selIndex].text = oldText;

            element.options[selIndex].value = oldValue;

            element.selectedIndex = selIndex+1;

        } else if(goto == "bottom") {  // 최하위로 이동

            var index = selIndex;

            while(index < elementLength-1) {

                element.options[index].text = element.options[index+1].text;

                element.options[index].value = element.options[index+1].value;

                index++;

           }

            element.options[element.options.length-1].text = selText;

            element.options[element.options.length-1].value = selValue;

            element.selectedIndex = element.options.length-1;

        } else return;

}

//////

</Script>

출처 : http://ngweb.tistory.com/89
http://blog.naver.com/jinhi21c/20047118736