Jam's story

[JQuery] select 모두 옮기기 ,하나만 옮기기 본문

WEB/JQuery

[JQuery] select 모두 옮기기 ,하나만 옮기기

애플쩀 2022. 6. 2. 07:03 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
        select{
            height: 200px;
            width: 100px;
        }
        button{
            width:40px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>

            <select multiple="multiple" id="sleft">
                <option>이창익</option>
                <option>김지민</option>
                <option>김희진</option>
                <option>유환재</option>
                <option>박예린</option>
            </select>
        </td>
        <td>
            <button>▶</button><br>
            <button>▶▶</button><br>
            <button>◀</button><br>
            <button>◀◀</button><br>
        </td>
        <td>
            <select multiple="multiple" id="sright"></select>
        </td>
    </tr>
</table>
<script>
//jq
$("button").first().click(function(){
    //선택한것만 옮기기
    $("#sleft option:selected").each(function(i,element){
        //남기지않고 옮기기
        //$("#sright").append(element);

        //남기고(복제하고) 옮기기
        $("#sright").append($(element).clone());

        //$("#sright").append($("<option></option>").text(element.innerText));
           
        });
});
$("button").eq(1).click(function(){
    $("#sleft option").each(function(i,element){
        $("#sright").append(element);
});
});
</script>

</body>
</html>
1)
$("#sright").append(elemt);       

남기고 복제를 할때에는 elemt.clone()이라고 하면 안되고
 $ (elemt).clone()이라고 해야한다. 
2)
$("#sright").append($(elemt).clone());

 

 

 

 

저작자표시 (새창열림)

'WEB > JQuery' 카테고리의 다른 글

[JQuery] input에서 입력받아 li태그로 만들기  (0) 2022.06.02
[JQuery] 만나이 계산  (0) 2022.06.02
[JQuery] 스타일 변경  (0) 2022.05.27
[JQuery] 버튼 누르면 동작 -전구에 불 끄고 키기  (0) 2022.05.27
[JQuery] 의사클래스 풍선도움말  (0) 2022.05.24
'WEB/JQuery' Related Articles more
Comments