Where The Streets Have No Name

두 SELECT간 요소(OPTION)의 복사/이동 본문

Developement/Web

두 SELECT간 요소(OPTION)의 복사/이동

highheat 2006. 4. 1. 00:34

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> http://www.neoburi.com </title>
<meta name="description" content="">
<script>
    /*
    *Source Select의 요소(option)를 Target Select로 복사한다.
    *@author neoburi@nowonplay.com, 2005.12.27
    */
    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)를 제거한다.
    *@author neoburi@nowonplay.com, 2005.12.27
    */
    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로 이동한다.
    *@author neoburi@nowonplay.com, 2005.12.27
    */
    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;
    }
</script>
</head>
<body>
<form name=testF>
복사와 제거 예제<br>
<select id=sourceList multiple size=10 onDblClick="copyElement(this, targetList)">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>
    <option value='9'>9</option>
</select>
<input type=button value=">>>" onClick="copyElement(sourceList, targetList)">
<input type=button value="<<<" onClick="removeElement(targetList)">
<select id=targetList multiple size=10 onDblClick="removeElement(this)">
</select><br>
</form>
<form name=testF0>
이동과 제거 예제<br>
<select id=sourceList multiple size=10 onDblClick="moveElement(this, targetList)">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>
    <option value='9'>9</option>
</select>
<input type=button value=">>>" onClick="moveElement(sourceList, targetList, true)">
<input type=button value="<<<" onClick="moveElement(targetList, sourceList)">
<select id=targetList multiple size=10 onDblClick="moveElement(this, sourceList)">
</select>
</form>
</body>
</html>

'Developement/Web' Related Articles more