Home > Article > Web Front-end > jquery implements the drop-down box function effect [example code]_jquery

jquery implements the drop-down box function effect [example code]_jquery

WBOYOriginal: 2016-05-16 15:01:481179browse

Can’t explain clearly, just look at the picture

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    div.centent {
      float: left;
      text-align: center;
      margin: 10px;
    }

    span {
      display: block;
      margin: 2px 2px;
      padding: 4px 10px;
      background: #898989;
      cursor: pointer;
      font-size: 12px;
      color: white;
    }
  </style>
  <script src="jquery-1.3.2.min.js"></script>
  <script>
    $(function () {
      $("#add").click(function () {//单个添加
        var $options = $("#select1 option:selected");
        $options.appendTo("#select2");
      });
      $("#add_all").click(function () {//全部添加
        $("#select1 option").each(function () {
          $(this).appendTo("#select2");
          /*
          也可以写为：
          var p=$("#select1 option");
          p.appendTo("#select2");
          */
        });
      });
      $("#remove").click(function () {//同上，只不过方向相反
        var $options = $("#select2 option:selected");
        // var $remove = $options.remove();
        $options.appendTo("#select1");
      });
      $("#remove_all").click(function () {//同上，只不过方向相反
        var p = $("#select2 option");
        p.appendTo("#select1");
      });
    });
    
  </script>
</head>
<body>
  <div class="centent">
    <select multiple id="select1" style="width:100px;height:160px">
      <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>
      <span id="add">选中添加到右边>></span>
      <span id="add_all">全部添加到右边>;></span>
    </div>
  </div>
  <div class="centent">
    <select multiple id="select2" style="width:100px;height:160px"></select>

    <div>
      <span id="remove"><<选中删除到左边</span>
      <span id="remove_all"><<全部删除到左边</span>
    </div>
  </div>
</body>
</html>

The above jquery implementation of the drop-down box function [example code] is all the content shared by the editor. I hope it can give you a reference, and I also hope you will support Script Home.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementing autocomplete to automatically complete forms based on bootstrap plug-in_javascript skillsNext article：Implementing autocomplete to automatically complete forms based on bootstrap plug-in_javascript skills

See more

jquery implements the drop-down box function effect [example code]_jquery

Related articles