안녕하세요 예뜨락입니다
팁코리아에 썼던 내용인데 필요한 분들이 계실것이라 생각하기에
제로보드에도 공유하고자 글을 올립니다

이하 팁코리아에 올렸던 내용을 복사해 왔습니다

싸이나 특히 세이 클럽 다음등 많은 포탈 사이트들을 보면
셀렉트 박스를 이용해서 보다 능동적인 기능을
수행하는 것을 보실수 있습니다

정확한 명칭이 달리 있는것으로 알고 있는데 그냥 편히 셀렉트 박스 콘트롤기라고 하겠습니다

많은 개인 싸이트를 돌아다니다 보면 이에 관한 소스가 올라온 곳이 많이 있습니다
다만 그 작동 원리에 대해 세세히 써 놓은 곳은 한군데도 없더군요

마리홈을 만들면서 필요해서 만들다 보니 어느정도 수준급의 콘트롤기를 만들수 있을 정도의
이해 능력이 키워지더군요 그도 그럴것이 각기 다른 종류의 콘트롤기를 대여섯번 이상
만들다 보니 자연 원리 습득이 되었습니다
처음엔 원리를 이해하고 만드는데 대략 6개월 이상의 시간이 걸렸지만 ( 처음 부터 잘할 수 있는
사람은 아무도 없습니다 )


우선 원리 이해는 선택된 셀렉트의 위로 움직임 부터 하겠습니다

셀렉트는 아래와 같이 표현 됩니다

<SELECT style="WIDTH: 150px; BACKGROUND-COLOR: yellow" size=5 name="board_no" id="board_no">
<OPTION value="디비에 입력되는 변수값1">보여지는 변수에 의한 값</OPTION>
<OPTION value="디비에 입력되는 변수값1">보여지는 변수에 의한 값</OPTION>                 </SELECT>

위의 것을 해석하면
셀렉트로 열고 셀렉트로 닫았으며 중간 값인 옵션에 의해 셀렉트 내에 배열로 값이 들어가게
됩니다

셀렉트 열음 태그 첫머리에 스타일로 넓이와 바탕색 그리고 아래로 보여지는 갯수 (size=5 5개 이상이 들어오면 셀렉트에 스크롤바가 생깁니다 즉 셀렉트 박스안에 실질적으로 보여지는 갯수이며 그 이상은 스크롤바를 내려야 볼수 있습니다 )

name="board_no" id="board_no"  (board_no 셀렉트의 아이디와 이름값입니다)
가장 중요한 부분인데 대부분 네임값 ( name="board_no" ) 만 지정을 해서 사용합니다
물론 사용하는데 큰 지장은 없습니다
그렇지만 익스외에 모질라 계열 불여우등을 사용하는 사용자를 위한다면 위와 같이

네임값 외에도 아이디 값을 같이 적어 둬야 작업하는데 있어 불편함이 없습니다
값을 참조할 때 네임외에 아이디로도 호출할 수 있으니까요

일단 만들때
먼저 자바 스크립트로 펑션이나 기능 수행을 할수 있도록 소스를 짜둔후
그 아래에 셀렉트 태그와 작동 버튼등을 꾸며 주시면 됩니다


<script language="javascript">
function Change_SelectOption(type) { // 위치 이동

}// 위치 이동
</script>

그럴싸한 이름으로 펑션을 하나 만들었습니다
에게~~~~ 이게 뭐야 ㅡㅡ;
시작은 이렇게 간단하게 시작합니다

펑션 Change_SelectOption(type) 라는 값에 type 이라는 지시어 (? 정확한 명칭이 생각나지 않는군요 달리 부른다 해도 돌 던지지 마시길... ) 가 들어가 있습니다
즉 이렇게 한 이유는 평션을 이프문 ( if )으로 잘 다듬어서 우리가 원하는
위로 올림 혹은 아래로 내림을 하기 위해서 입니다
즉 선택 버튼에

<A href="javascript:Change_SelectOption('up');"><IMG src="올림이미지주소" align=absMiddle border=0></A>
<A href="javascript:Change_SelectOption('down');"><IMG src="내림이미지주소" align=absMiddle border=0></A>
위와 같이 자바스크립트 버튼을 만들어주고 지시어만 달리주면 위로 혹은 아래로를 간단하게
쓸수 있습니다

물론 각각 펑션을 달리줘서 Change_up()   Change_down()  과 같이 자바스크립트 평션을
두개 만들어쓸 수도 있지만 객관적으로 볼때 아무래도 비슷한 기능인데 소속성이 없어 보이겠죠

자 셀렉트박스에 이미지 버튼에 펑션이름까지 정했습니다
이젠 자바스크립트의 정확한 작동을 위해서 프로그램밍을 해야합니다
아래와 같이 이프문을 이용 아래 위에 대한 작동 명령을 나누어 줍니다

<script language="javascript">
function Change_SelectOption(type) { // 위치 이동
     if(type == "up") {

     }//type == "up"
     else
     if(type == "down") {


     }//type == "down"
}// 위치 이동
</script>

우리가 현재 할 부분은 위로 버튼을 눌렀을때 선택된 셀렉트가 한칸씩 위로 이동하는 것입니다
그럼 type에 들어갈 부분은 버튼에 의한 동작으로 선택되어지는 up 이겠죠

평션 안에 지역변수를 하나 만들어 보겠습니다
즉 펑션 안에서 가장 많이 쓰는 길게 쓰여지는 부분을 짤게 만들어 가독성(소스 읽기 편함)을 높이는 겁니다



<script language="javascript">
function Change_SelectOption(type) { // 위치 이동
     var f=document.getElementById('board_no');
     var sindex=f.selectedIndex;
     if(type == "up") {

     }//type == "up"
     else
     if(type == "down") {


     }//type == "down"
}// 위치 이동
</script>

위에 들어간 것은
     var f=document.getElementById('board_no');
     var sindex=f.selectedIndex;이두개의 변수가 들어갔습니다
해석을 하자면 문서속에 있는 (즉 지금 보여지는 페이지에서 ) board_no라는 아이디 값을
참조해서 f 라는 변수에 넣어두게 되는것입니다

즉 익스 표현대로 하자면 document.폼이름.객체이름; 과 같이 표현이 됩니다
위의 방법대로도 표현을 할수 있지만 불여우등에서는 비표준이라 작동이 되지 않습니다
되도록이면 위의 방식인
아이디값을 참조한 document.getElementById('객체명');
등을 이용하시길 바랍니다 이에 관한 사항은 시간 나실때  웹표준으로 검색해서 한번쯤 보시길
바랍니다

board_no 는 위에서 설정한 셀렉트의 네이값이며 아이디 값입니다
그걸 우리는 f 라는 변수에 등록을 해두었습니다
var sindex=f.selectedIndex;
위의 것을 풀이하자면
document.getElementById('board_no').selectedIndex; 가 될것입니다
즉 board_no 값을 가진 객체가 selectedIndex 선택되어진 값 정도가 될것입니다
풀이하자면
셀렉트의 어느 특정값을 선택했을때 그곳이 파란색이 입혀지며 선택되어지는 것을
볼수가 있습니다
파란색이 입혀지는 마우스로 선택한 부분을 뜻하게 됩니다


이쯤해서 사용자 인터페이스를 한번 생각해 봅니다
모든 사람이 사용해도 불편함 없게 하기 위해선 그만큼 생각을 해야 합니다

셀렉트를 선택후 파란색이 입혀진 상태에서 버튼을 눌러 올릴수도 있지만
아무 준비 없이 무조건 선택 버튼을 누르는 경우가 있습니다
자 ~!
경우의 수가 하나 생겼습니다
그러니 이부분도 참조해서 작성해야겠죠


<script language="javascript">
function Change_SelectOption(type) { // 위치 이동
     var f=document.getElementById('board_no');
     var sindex=f.selectedIndex;
     if(type == "up") {

          if(sindex<0) {// 셀렉트를 선택하지 않았을 때
          alert('선택된게 없으니 제일 아래 항목을 선택합니다.');
                  f.selectedIndex = f.options.length-1;
          return;
          }//셀렉트를 선택하지 않았을 때
          else{// 셀렉트를 선택했을 때

          }// 셀렉트를 선택했을 때

     }//type == "up"

     else
     if(type == "down") {


     }//type == "down"
}// 위치 이동
</script>




          if(sindex<0) {// 셀렉트를 선택하지 않았을 때
          alert('선택된게 없으니 제일 아래 항목을 선택합니다.');
                  f.selectedIndex = f.options.length-1;
          return;
          }//셀렉트를 선택하지 않았을 때
          else{// 셀렉트를 선택했을 때

          }// 셀렉트를 선택했을 때

이 부분이 더 들어갔습니다
위에서 말했듯 선택하지 않고 눌렀을때와 선택했을 경우로 나누었습니다
그리고 선택하지 않았을때는 선택하지 않았으니 제일 아래 항목을 선택한다는 메세지와
함께 제일 아래 항목을 선택하게 했습니다


셀렉트는 제일 처음 인텍스 항목이 0부터 시작합니다
즉 처음 줄이 0의 인덱스 값을 2번째줄이
1의 값을 갖게 됩니다
셀렉트를 선택했는지 않했는지 알수 있는 방법은
현재의 선택되어진 셀렉트 값이 있는지 없는지만 참조하면 대번 답이 나오겠죠

  if(sindex<0) {
sindex는 위에서 설명했듯 선택되어진 셀렉트의 값입니다
선택하지 않고 버튼을 눌렀으니 당연 셀렉트의 값은 없습니다
즉 0보다 작다 혹은  if(sindex=="") {와 같이 써주시면 될것입니다

보다 작을때 다음 해당 소스인 알러트 창을 이용해서 문구를 보여준후 맨 아래 항목을
셀렉트 선택해지게 만들어 줍니다
그후 리턴 return; 을 이용해 더 이상 소스 진행을 시키지 않도록 반환 시켜주구요
                  f.selectedIndex = f.options.length-1;
          return;
셀렉트의 selectedIndex (선택되어지는 값) 는 f.options.length-1 이다
f 는 이미 셀렉트의 아이디 값이니 셀렉트 박스의 옵션중 length 전체 길이를 반환 받아 -1 한 값
셀렉트의 인덱스 값은 0부터 시작하기에 전체 값( 길이 ) 보다 하나가 작아야 마지막 인텍스값이 됩니다
위와 같이 참조하면 셀렉트를 선택하지 않고 위로 버튼을 눌렀을 경우
알러트와 함께 제일 하단의 셀렉트를 선텍 참조하게 됩니다

선택을 하지 않고 셀렉트 버튼을 눌렀을 때는 해결 되었습니다
그러면 다음의 경우가 있습니다
셀렉트를 선택했지만 그 값이 더 이상 위로 올릴 수 없는 첫번째 값을 경우와
그렇지 않을 경우 두개로 나뉘어 집니다

그래서 우리는 아래와 같이 다시 한번 더 이프문으로 나누어 코딩을 해줍니다

     if(type == "up") {
          if(sindex<0) {// 셀렉트를 선택하지 않았을 때
            alert('선택된게 없으니 제일 아래 항목을 선택합니다.');
                     f.selectedIndex = f.options.length-1;
             return;
         }
          else{// 셀렉트를 선택했을 때

             if(f.options.selectedIndex == 0) {//처음 항목일 때
                alert('+ '처음 목록 입니다 더 이상 이동할 수 없습니다.     ');
                return;
             }//처음 항목일 때
             else{// 위로 올릴수 있는 항목을 선택했을 때

             }// 위로 올릴수 있는 항목을 선택했을 때

         }// 셀렉트를 선택했을 때
     }//type == "up"


             if(f.options.selectedIndex == 0) {//처음 항목일 때
                alert('처음 목록 입니다 더 이상 이동할 수 없습니다.     ');
                return;
             }//처음 항목일 때
             else{// 위로 올릴수 있는 항목을 선택했을 때

             }// 위로 올릴수 있는 항목을 선택했을 때

위와 같이 나누어 주었습니다

셀렉트 인덱스의 처음 값은 0 이라고 했습니다
그러니 처음 값을 참조할 때는
if( 선택되어진 셀렉트 인덱스의 값 == 0 ) 옆과 같이 코딩해 주면 되겠죠
처음 항목을 선택하고 위로 올리기 버튼을 누르면 이동할 수 없다는 안내 알러트가 뜨게 하고
더 이상 소스 진행을 시키지 않게 하기 위해 리턴을 해줍니다


자~ 이제 정말 중요한 실질적인 부분
선택해서 옮길수 있는 부분을 선택시 이동되어 지는 부분인

             else{// 위로 올릴수 있는 항목을 선택했을 때

             }// 위로 올릴수 있는 항목을 선택했을 때
위의 부분입니다


     var f=document.getElementById('board_no');
     var sindex=f.selectedIndex;
     if(type == "up") {
          if(sindex<0) {// 셀렉트를 선택하지 않았을 때
            alert('선택된게 없으니 제일 아래 항목을 선택합니다.');
                    f.selectedIndex = f.options.length-1;
             return;
          }
          else{// 셀렉트를 선택했을 때
             //처음 게시판일 때
             if(f.options.selectedIndex == 0) {
                alert('처음 게시물입니다 <br> 더 이상 이동할 수 없습니다.     ');
                return;
             }else{

                 var savedValue=f.options[sindex].value;
                 var savedText=f.options[sindex].text;
                 f.options[sindex].value=f.options[sindex-1].value;
                 f.options[sindex].text=f.options[sindex-1].text;
                 f.options[sindex-1].value=savedValue;
                 f.options[sindex-1].text=savedText;
                 f.options[sindex-1].selected=true;
                 f.options[sindex].selected=false;


             }
          }// 셀렉트를 선택했을 때
     }//type == "up"

위와 같이


                 var savedValue=f.options[sindex].value;
                 var savedText=f.options[sindex].text;
                 f.options[sindex].value=f.options[sindex-1].value;
                 f.options[sindex].text=f.options[sindex-1].text;
                 f.options[sindex-1].value=savedValue;
                 f.options[sindex-1].text=savedText;
                 f.options[sindex-1].selected=true;
                 f.options[sindex].selected=false;


이 부분을 넣어줍니다

                 var savedValue=f.options[sindex].value;
                 var savedText=f.options[sindex].text;
savedValue savedText 라는 변수에 셀렉트 된 곳의 value 값 ( 실질적인 디비에 저장되는 값들 ) 과 text 값( 셀렉트에 보여지는 글 )을 받아 둡니다
                 f.options[sindex].value=f.options[sindex-1].value;
현재의 선택된 벌류 값은 sindex-1 이전 값 ( 현재의 값에서 빼기 1이니 이전 인덱스의 값이
됩니다 다음 인덱스의 값은 +1 하면 됩니다 ) 의 벌류값이다

위의 뜻은 버튼을 누르면 펑션이 작동해 현재의 셀렉트 인덱스 값에 이전 value값을 받아 둡니다

                 f.options[sindex].text=f.options[sindex-1].text;
위의 해석과 마찬가지 입니다 다만 text 값은 셀렉트에 보여지는 글입니다



현재의 값에 이전 값을 넣어 두었습니다
그럼 현재의 값을 이전 값으로 옮겨야겠죠
                 f.options[sindex-1].value=savedValue;
                 f.options[sindex-1].text=savedText;
선택되어진 인덱스 이전의 값에 savedValue 와 savedText 를 넣었습니다
만약에 이전 값에 현재의 값을 넣게 된다면 뒤죽 박죽이 될것입니다
이미 선택되어진 곳에 이전 값이 들어갔는데 이전 값에 다시 현재의 값이 들어가면
선택되어졌던 값은 증발되구 이전값만 두개가 기록되어지는 꽤심한 일이 생깁니다

그래서 맨 처음 선택되어 지는 값을 우리는 savedValue 와 savedText 라는 변수에
고이 모셔 두었구 이제 이전값에 모셔 두었던 값을 그대로 받아 옮겨준겁니다



한번 더 풀이하면 미리 선택되어지는 값을 변수를 이용 기록해 두었다가
선택되어진 곳에 이전 값을 기록해주고
이전 값엔  받아 두었던 현재의 값을 대체해 줍겁니다


                 f.options[sindex-1].selected=true;
                 f.options[sindex].selected=false;
위로 올렸으니 현재의 값이 들어간 한칸 위의 곳은 selected=true 로 파란색이 입혀지게
셀렉트 되어집니다
그리고 현재의 값은 이전값으로 대체 되면서 false 즉 셀렉트가 풀리게 됩니다




중요한 부분은 현재의 값을 변수로 기억해 두었다가
현재의 셀렉트 부분에 이전 값을 넣어주고
이전 값에 기억해 둔 값을 넣어주면 자연 보여지는건 실시간으로 위로 이동하는
셀렉트의 모습으로 우리 눈에 보여지게 되는 것입니다




어느 정도 이해를 하셨는지 모르겠습니다
간단한 내용을 한 두어시간 글만 쓴것 같군요 ㅡㅡ;