jQuery & script

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

포카리s 2017. 4. 4. 19:51
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
<!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>


저작자표시 비영리

'jQuery & script' 카테고리의 다른 글

[Script] 숫자만 입력받기  (0) 2017.11.21
[Script]숫자 한국 원단위 변환  (0) 2017.11.21

'jQuery & script'의 다른글

  • 현재글Select Box Option 동적 추가 , 삭제 , 복사

관련글

티스토리툴바