[JavaScript] select 박스 옮기기 예제

HTML의 select 박스 안의 option태그를 다른 셀렉트 박스로 옮겨야 할 경우가 있다.

뭔가 선택지가 주어졌을 때 그 중에서 원하는 옵션을 고르는 경우가 될 것이다.

이러한 예제는 구글에 찾아보면 많이 나올 가능성이 높다.

검색을 통해 나온 대부분의 소스들을 보면 jQuery를 이용한게 없어서 내가 했다.

대부분의 소스에서 사용하는 for 대신 $.each를 이용한다.

A B C

 

<div>
    <div style="display:inline-block;vertical-align:top;">
        <select multiple size="8" style="width:150px;" id="left">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div style="display:inline-block;width:100px;text-align:center;" id="control">
        <button style='width: 50px;margin:2px;' class="right-all"> >> </button><br/>
        <button style='width: 50px;margin:2px;' class="right"> > </button><br/>
        <button style='width: 50px;margin:2px;' class="left"> < </button><br/>
        <button style='width: 50px;margin:2px;' class="left-all"> << </button><br/>
    </div>
    <div style="display:inline-block;width:150px;vertical-align:top;">
        <select multiple size="8" style="width: 150px;" id="right">
        </select>
    </div>
</div>
<script>
    $(function(){
        $("#control button").click(function(){
            if($(this).hasClass("right-all")){
                $("#left option").each(function(){
                    $("#right").append(new Option($(this).text(), $(this).val()));
                });
                $("#left option").remove();
            }else if($(this).hasClass("right")){
                $("#left option:selected").each(function(){
                    $("#right").append(new Option($(this).text(), $(this).val()));
                });
                $("#left option:selected").remove();
            }else if($(this).hasClass("left")){
                $("#right option:selected").each(function(){
                    $("#left").append(new Option($(this).text(), $(this).val()));
                });
                $("#right option:selected").remove();
            }else if($(this).hasClass("left-all")){
                $("#right option").each(function(){
                    $("#left").append(new Option($(this).text(), $(this).val()));
                });
                $("#right option").remove();
            }
        });
    });
</script>