listBox选择

最新推荐文章于 2021-06-22 17:42:27 发布

jis117

最新推荐文章于 2021-06-22 17:42:27 发布

阅读量84

点赞数

分类专栏： html 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/jis117/article/details/84656479

版权

html 专栏收录该内容

19 篇文章 0 订阅

订阅专栏



<!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">>></button>
        <button id="btn2"><<</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>