SELECT BOX : 추가,삭제,초기화 - Javascript(자바스크립트)

SELECT BOX : 추가,삭제,초기화 - Javascript(자바스크립트)


 

   SELECT MULTIPLE에서 양쪽 SELECT BOX간 값을 주고 받는 자바 스크립트입니다.

위에 보시는것처럼 버튼으로 왼쪽 SELECT BOX의 값들을 선택 된 만큼 오른쪽 SELECT BOX로 옮김니다.

저도 검색해서 찾았는데 단체로 안넘어가져서 조금 수정을 해서 사용 했습니다.

기본적으로 왼쪽 박스에는 DB에 등록된 값들을 뿌려줍니다.

그리고 오른쪽으로 옮긴 값들을 다음페이지로 넘겨줍니다.

참고로 다음페이지에서 여러개의 값들을 받아야 하기 때문에 배열로 받아서 처리합니다.

밑에 접어져있어요 :D

//오른쪽박스의 값을 다시 왼쪽박스로, 참고로 제일 밑으로 들어갑니다.

function removeItem(){

        var frm = document.AddForm;

        var len = frm['add[]'].length;

        var len1 = frm.original.length;

        var arr_del = new Array();

        var cnt = 0;



        for(i=0;i<len;i++){

            if(frm['add[]'].options[i].selected){

                arr_del[cnt] = frm['add[]'].options[i].value;

                cnt++;

            }

        }

        if(cnt==0){

            alert('게시판을 선택해주십시오.');

             return;

         }

         for(i=0;i<len;i++){

            for(j=0;j<arr_del.length;j++){

                if(frm['add[]'].options[i].value==arr_del[j]){

                    frm.original.add(new Option(frm['add[]'].options[i].text, frm['add[]'].options[i].value,false,false));

                    frm['add[]'].options[i] = null;

                    len1 = frm.original.length;

                }

            }

        len=frm['add[]'].length;

        }

    }



//왼쪽 박스의 값을 오른쪽 박스로, 1개부터 여러개까지 옮길 수 있습니다. 위의 함수도 마찬가지..

    function addItem(){

        var frm = document.AddForm;

        var len1 = frm.original.length;

        var len = new Array();

        var add = new Array();

        var len = frm['add[]'].length;

        var arr_add = new Array();

        var cnt = 0;



        for(i=0;i<len1;i++){

            if(frm.original.options[i].selected){

                arr_add[cnt] = frm.original.options[i].value;

                cnt++;

            }

        }

        if(cnt==0){

            alert('게시판을 선택해 주십시오.');

            return;

        }

        for(i=0;i<len1;i++){

            for(j=0;j<arr_add.length;j++){

                if(frm.original.options[i].value==arr_add[j]){

                    frm['add[]'].options[len] = new Option(frm.original.options[i].text, frm.original.options[i].value, false,true);

                    frm.original.options[i] = null;

                    len = frm['add[]'].length;

                }

            }

            len1 = frm.original.length;

        }



    }



//기존의 removiItem()함수를 사용해서 오른쪽의 값을 모두 오른쪽으로 보냅니다. 초기화죠 ㅎㅎ

    function init_null(){

        removeItem();

        document.AddForm['add[]'].options.length=null;

    }

실력 좋으신 분이라면 더 심플하고 간결하게 만드실 수 있으실거에요;
전 실력이;;;;