listBox选择


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
  <script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  <style type="text/css">
    select{width: 150px;height: 180px;}
  </style>
</head>
<body>
  <div>
    <div>
      <select multiple="multiple" name="select1" id="select1">
        <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>
      </select>
      <div style="display:inline">
        <button id="reset">REST</button>
        <button id="btn1">&gt;&gt;</button>
        <button id="btn2">&lt;&lt;</button>
      </div>
      <select multiple="multiple" name="select2" id="select2">
        
      </select>
    </div>

  </div>
</body>
<script type="text/javascript">
  var $s1 = $('#select1'),
      s1h = $s1.html(),
      $s2 = $('#select2'),
      s2h = $s2.html();
  $('#btn1').on('click', function (e) {
    $s1.find('option:selected').appendTo($s2);
  });
  
  $('#btn2').on('click', function (e) {
    $s2.find('option:selected').appendTo($s1);
  });

  $('#reset').on('click', function(e) {
    debugger;
      $s1.empty().append(s1h);
      $s2.empty().append(s2h);
  });
</script>
</html>

你可能感兴趣的:(listbox)