LoRz

Monday, September 1, 2008

Select Transfer in jQuery

Sample code using jQuery to transfer data from 2 select boxes.

<html>
<head>
 <script src="js/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  $().ready(function() {
   $('#add').click(function() {
    var selected1 = $("#select1 option:selected"); 
    alert(selected1.val());
    alert(selected1.text());
    return !selected2.remove().appendTo('#select2');
   });
   $('#remove').click(function() {
    var selected2 = $("#select2 option:selected"); 
    alert(selected2.val());
    alert(selected2.text());
    return !selected2.remove().appendTo('#select1');
   });
  });
 </script>
 
 <style type="text/css">
  a {
   display: block;
   border: 1px solid #aaa;
   text-decoration: none;
   background-color: #fafafa;
   color: #123456;
   margin: 2px;
   clear:both;
  }
  div {
   float:left;
   text-align: center;
   margin: 10px;
  }
  select {
   width: 100px;
   height: 80px;
  }
 </style>
 
</head>

<body>
 <div>
  <select multiple id="select1">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
   <option value="4">Option 4</option>
  </select>
  <a href="#" id="add">add >></a>
 </div>
 <div>
  <select multiple id="select2"></select>
  <a href="#" id="remove"><< remove</a>
 </div>
</body>
</html>

posted by Lorz # 11:03 PM

<< Home

LoRz

Monday, September 1, 2008

Select Transfer in jQuery

Archives