본문 바로가기
Programming Language/Javascript

(스크랩)crossSelectBox

by 뒹굴거리는프로도 2017. 9. 4.
반응형

출처

http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html



[js]


  1. $().ready(function() {  
  2.  $('#add').click(function() {  
  3.   return !$('#select1 option:selected').remove().appendTo('#select2');  
  4.  });  
  5.  $('#remove').click(function() {  
  6.   return !$('#select2 option:selected').remove().appendTo('#select1');  
  7.  });  
  8. });  


[html]
  1. <html>  
  2. <head>  
  3.  <script src="js/jquery.js" type="text/javascript"></script>  
  4.  <script type="text/javascript">  
  5.   $().ready(function() {  
  6.    $('#add').click(function() {  
  7.     return !$('#select1 option:selected').remove().appendTo('#select2');  
  8.    });  
  9.    $('#remove').click(function() {  
  10.     return !$('#select2 option:selected').remove().appendTo('#select1');  
  11.    });  
  12.   });  
  13.  </script>  
  14.    
  15.  <style type="text/css">  
  16.   a {  
  17.    display: block;  
  18.    border: 1px solid #aaa;  
  19.    text-decoration: none;  
  20.    background-color: #fafafa;  
  21.    color: #123456;  
  22.    margin: 2px;  
  23.    clear:both;  
  24.   }  
  25.   div {  
  26.    float:left;  
  27.    text-align: center;  
  28.    margin: 10px;  
  29.   }  
  30.   select {  
  31.    width: 100px;  
  32.    height: 80px;  
  33.   }  
  34.  </style>  
  35.    
  36. </head>  
  37.   
  38. <body>  
  39.  <div>  
  40.   <select multiple id="select1">  
  41.    <option value="1">Option 1</option>  
  42.    <option value="2">Option 2</option>  
  43.    <option value="3">Option 3</option>  
  44.    <option value="4">Option 4</option>  
  45.   </select>  
  46.   <a href="#" id="add">add &gt;&gt;</a>  
  47.  </div>  
  48.  <div>  
  49.   <select multiple id="select2"></select>  
  50.   <a href="#" id="remove">&lt;&lt; remove</a>  
  51.  </div>  
  52. </body>  
  53. </html>  



As was mentioned in the comments below, the following (slightly modified) code can be used to automatically select all options in the second select box before submitting (thanks Charlie!).

view plaincopy to clipboardprint?
  1. $('form').submit(function() {  
  2.  $('#select2 option').each(function(i) {  
  3.   $(this).attr("selected", "selected");  
  4.  });  
  5. });  


반응형
저작자표시

'Programming Language > Javascript' 카테고리의 다른 글

[Javascript] Form 데이터 문자열로 변환 시, serialize() 사용하기  (0) 2017.10.12
(스크랩) 프로토타입 이해하기  (0) 2017.09.19
자바스크립트 한 줄 압축풀기 사이트  (0) 2017.09.14
multiple selected option 의 값 추출, jQuery  (0) 2017.09.12
변수와 프로퍼티  (0) 2017.07.26

관련글

티스토리툴바