Develop

[js] 셀렉트박스(select)의 옵션(option) 동적으로 추가/제거

by hooni posted Apr 23, 2013
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

좋은 예제인듯..

아래는 주요 함수 부분임~

<script> 
/* 
*Source Select의 요소(option)를 Target Select로 복사한다. 
*/ 
function copyElement(sourceObj, targetObj){
    var elms = sourceObj.options;
    for( i = 0, k = elms.length; i < k; i++ ){
        if( elms[i].selected ){
            targetObj.add(new Option(elms[i].text,
                elms[i].value, false, false));
        }
    }
    sourceObj.selectedIndex=-1; 
}

/* 
*Source Select의 요소(option)를 제거한다. 
*/ 
function removeElement(sourceObj){
    var elms = sourceObj.options;
    var posArr = new Array();
    var increase = 0;
    for( i = 0, k = elms.length; i < k; i++ ){
        if( elms[i].selected ){
            posArr[increase++] = elms[i].value;
        }
    }
    for( i = 0, k = posArr.length; i < k; i++ ){
        for( x = 0, y = elms.length; x < y; x++ ){
            if( (posArr[i] == elms[x].value) && elms[x].selected ){
                sourceObj.remove(x);
                x = 0;
                y--;
            }
        }
    } 
}

/* 
*Source Select의 요소(option)를 Target Select로 이동한다. 
*/ 
function moveElement(sourceObj, targetObj, isSort){
    var elms = sourceObj.options;
    for( i = 0, k = elms.length; i < k; i++ ){
        if( elms[i].selected ){
            targetObj.add(new Option(elms[i].text,
                elms[i].value, false, false));
        }
    }
    removeElement(sourceObj);
    sourceObj.selectedIndex = -1; 
}

/* 
*Source Select의 요소(option)의 상하순서를 바꾼다. 
*/ 
function move_option_in(src,to) {
    if(!src)return;
    var src_index = src.selectedIndex;
    if(src_index<0)return;
    if(to == "up"){
        if(src_index==-1||src_index==0)return;
        var tempoption = 
            new Option(src.options[src_index].text,
                src.options[src_index].value);
        src.options[src_index] = 
            new Option(src.options[src_index-1].text,
                src.options[src_index-1].value);
        src.options[src_index-1]=tempoption;
        src.options[src_index-1].selected=true;
    }else if(to == "down"){
        if(src_index>=src.options.length-1)return;
        var tempoption = 
            new Option(src.options[src_index].text,
                src.options[src_index].value);
        src.options[src_index] = 
            new Option(src.options[src_index+1].text,
            src.options[src_index+1].value);
        src.options[src_index+1]=tempoption;
        src.options[src_index+1].selected=true;
    } 
} 
</script>