• Open API/Jquery

    jQuery Select Box Option 동적 추가 , 이동, 삭제 , 복사

    2016. 11. 17.

    by. Yo.

    728x90




    Select box 간 Option 값 이동, 삭제 , 추가 하는 샘플코드 입니다.


    Test Url : http://www.uhoon.co.kr/test/5237.html



    <!DOCTYPE html>
<html>
<head>
    <title>append option / remove option</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="sel" name="sel" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                    <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>
                    <option value="10" >10</option>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveLeft"/>
                <input type="button" value="Selected Value " id="getValue"/>
                <input type="button" value="All Value " id="getSelectedValue"/>
                 
 
                 
 
                <input type="text" id="addOption"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd"/>
            </td>
            <td>
                <input type="button" value="Move=>" id="btnMoveRight"/>
 
                <input type="button" value="<=Move" id="btnMoveLeft"/>
 
                <input type="button" value="Copy=>" id="btnCopyLeft"/>
 
                <input type="button" value="<=Copy" id="btnCopyLeft2"/>
 
            </td>
            <td>
                <select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveRight"/>
                <input type="button" value="Selected Value " id="getValue2"/>
                <input type="button" value="All Value" id="getSelectedValue2"/>
                 
 
                 
 
                <input type="text" id="addOption2"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd2"/>
            </td>
        </tr>
    </table>
</body>
 
    <script type="text/javascript">
    <!--
        $(function(){
            $("#btnRemoveLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnRemoveRight").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnMoveRight").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove().appendTo('#sel2');
                });
            });
 
            $("#btnMoveLeft").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove().appendTo('#sel');
                });
            });
 
            $("#getValue").on("click",function(){
                var values = "";
                $('#sel option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getValue2").on("click",function(){
                var values = "";
                $('#sel2 option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue").on("click",function(){
                var values = "";
                $('#sel option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue2").on("click",function(){
                var values = "";
                $('#sel2 option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#btnCopyLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).clone().appendTo('#sel2');
                });
            });
 
            $("#btnCopyLeft2").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).clone().appendTo('#sel');
                });
            });
 
            $("#btnAdd").on("click",function(){
                if($('#sel').find("[value='"+$('#addOption').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
 
            $("#btnAdd2").on("click",function(){
                if($('#sel2').find("[value='"+$('#addOption2').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
        });
 
        $(window).load(function(e){
 
        });
 
    //-->
    </script>
</html>
    728x90
    저작자표시 (새창열림)

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바