Select Box Option 위 아래 이동

아래의 출처에 있는 소스를 약간 수정한 내용입니다.

==============================================================================================

<SCRIPT LANGUAGE="JavaScript">
<!--

 var Selectbox = new Object();

 Selectbox.upOptions = function ( selectBoxListObj ) {
  for ( var k = 1 ; k < selectBoxListObj.options.length ; k++ ){
   if ( selectBoxListObj.options[ k ].selected )
   {
    // 자신의 상위가 선택되어 있다면, 위로 올리지 않는다.
    if ( selectBoxListObj.options[ k -1 ].selected )
     continue;
    // 현재k번째 Option과 그위의 k-1번째 Option객체를 바꾼다.
    else
     this.swapOption( selectBoxListObj, k, k-1 );
   }
  }
 }

 Selectbox.downOptions = function ( selectBoxListObj ) {
  for ( var k = selectBoxListObj.options.length-2 ; k >= 0 ; k-- )
  {
   if ( selectBoxListObj.options[ k ].selected )
   {
    // 자신의 하위가 선택되어 있다면, 아래로 내리지 않는다.
    if ( selectBoxListObj.options[ k+1 ].selected )
     continue;
    // 현재k번째 Option과 그위의 k-1번째 Option객체를 바꾼다.
    else
     this.swapOption( selectBoxListObj, k, k+1 );
   }
  }
 }

 Selectbox.swapOption = function ( selectBoxListObj, k, j ) {

  // 각 자리에 있는 Option객체를 임시 변수에 담는다.
  var k_new_option = selectBoxListObj.options[ k ];
  var j_new_option = selectBoxListObj.options[ j ];

  // 원래 k,j 자리에 껍데기만 있는 Option 객체를 대입한다.
  selectBoxListObj.options[ k ] = new Option();
  selectBoxListObj.options[ j ] = new Option();

  // k->j,   j->k 로 서로 다른 곳에 객체를 대입한다.
  selectBoxListObj.options[ k ] = j_new_option;
  selectBoxListObj.options[ j ] = k_new_option;
 }
//-->
</SCRIPT>

<form name="form1">
<select name='TestSelect' size='12' style='width:300; font-size: 9pt;height:300' multiple>
 <option value="1000">1</option>
 <option value="1001">2</option>
 <option value="1002" selected>3</option>
 <option value="1003">4</option>
 <option value="1004">5</option>
 <option value="1005">6</option>
 <option value="1006">7</option>
 <option value="1007" selected>8</option>
 <option value="1008">9</option>
 <option value="1009">10</option>
</select>

<input type="button" onClick="Selectbox.upOptions(form1.TestSelect);" style="width:50" value="▲" onFocus="blur()">
<input type="button" onClick="Selectbox.downOptions(form1.TestSelect);" style="width:50" value="▼" onFocus="blur()">
</form>

==============================================================================================

으하하하

출처 : 양군(yanggun7201)
링크 : http://cafe.naver.com/javasp.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=1233