IT_Programming/JavaScript

[JS] Multiple Select 순서 바꾸기 예제

JJun ™ 2008. 1. 25. 12:07

출처 : http://www.neoburi.com/

<html>
<head>
    <script language="javascript">
        <!--
        function move(index,to) {
            var list = document.form.list;
            var total = list.options.length-1;
            if (index == -1) return false;
            if (to == +1 && index == total) return false;
            if (to == -1 && index == 0) return false;
            var items = new Array;
            var values = new Array;
            for (i = total; i >= 0; i--) {
                items[i] = list.options[i].text;
                values[i] = list.options[i].value;
            }
            list.length=0;
            if( to == "up" ){
                for( i = 0; i <= total; i++ ){
                    if( i == index - 1 ){
                        list.options[i]=new Option( items[index], values[index] );
                        list.options[i + 1] = new Option( items[i], values[i] );
                        i++;
                    }else{
                       list.options[i]=new Option( items[i], values[i] );
                    }
                }
            }else{
                for( i = total; i >= 0; i-- ){
                    if( i == index + 1 ){
                        list.options[i]=new Option( items[index], values[index] );
                        list.options[i - 1] = new Option( items[i], values[i] );
                        i--;
                    }else{
                        list.options[i]=new Option( items[i], values[i] );
                    }
                }
            }
            list.focus();
        }
        function submitForm() {
            var list = document.form.list;
            var theList = "";
            var theValue = "";
            for (i = 0; i <= list.options.length-1; i++) {
                theList += list.options[i].text;
                theValue += list.options[i].value;
                if (i != list.options.length-1){
                    theList += "/";
                    theValue += "/";
                }
            }
            alert( "text  : " + theList );
            alert( "values : "  + theValue );
        }
        // -->
    </script>

</HEAD>

<BODY>

<form name="form">
<table>
    <tr>
        <td align="middle">
            <select name="list" size="4">
                <option value="1">B형 남자친구</option>
                <option value="2">왕조의 눈</option>
                <option value="3">자카르타</option>
                <option value="4">어디...홍반장</option>
            </select><br><br>
            <input type="button" value="전송하기" onClick="submitForm()">
        </td>
        <td valign="top">
            <input type="button" value="↑" onClick="move(this.form.list.selectedIndex,'up')"><br><br>
            <input type="button" value="↓" onClick="move(this.form.list.selectedIndex,'down')">
        </td>
    </tr>
</table>
</form>

</body>
</html>