1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html> <html lang="en"> <head> <!-- 만든 날짜: 2018.06.11 소요시간 : 3시간 기능 : 선택한 option을 다른 selectbox로 옮기기 작성자 : 장민정 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <select id ="box1" name="box1"size=4 multiple> <option value="baseBall" name="sport_box1" >야구</option> <option value="basketBall" name="sport_box1">농구</option> <option value="soccer" name="sport_box1">축구</option> <option value="hockey" name="sport_box1">하키</option> </select> <button name="btn"><<</button> <button name="btn"><</button> <button name="btn">></button> <button name="btn">>></button> <select id ="box2" size=4 multiple> </select> <script> $(document).ready(function(){ $('button[name=btn]:eq(0)').bind('click',AllRemove); $('button[name=btn]:eq(1)').bind('click',SelectRemove); $('button[name=btn]:eq(2)').bind('click',SelectOption); $('button[name=btn]:eq(3)').bind('click',AllSelect); }); function AllRemove(){ $('#box2 option').remove(); } function SelectRemove(){ $('#box2 option:selected').remove(); } function SelectOption(){ $('#box1 option').each(function(){ if(this.selected){ $('#box2').append($(this).clone()); } }); } function AllSelect(){ $('#box1 option').each(function(){ // clone() 사용하면 select box name 중복 발생 $('#box2').append($(this).clone()); }) } </script> </body> </html> | cs |
'Develop > JavaScript & JQuery' 카테고리의 다른 글
| 함수 (0) | 2018.06.26 |
|---|---|
| SELECT BOX(1차) (0) | 2018.06.11 |
| jQuery 이벤트 (0) | 2018.06.10 |
| JQuery (0) | 2018.06.10 |
| jQuery로 이벤트 다루기(1) (0) | 2018.06.07 |
댓글