jQuery实现下拉框左右移动（全部移动，已选移动）

前端技术 2023/09/07 JavaScript

用到的方法为：appendTo()
格式：$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

看一下具体实现的代码：

<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
  <title></title>
  <script src=\"js/jquery-1.6.1.min.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\">
    $(function () {
      $(\"#add\").click(function () {
      //1,方式一
//        var $option = $(\"#select1 option:selected\");  //获取选中的选项
//        var $remove = $option.remove(); //删除下拉列表中选中的选项
//        $remove.appendTo(\"#select2\");  //追加给对方
        //2，方式二
        var $option = $(\"#select1 option:selected\");  //获取选中的选项
        $option.appendTo(\"#select2\");  //追加给对方
      });
      $(\"#add_all\").click(function () {
        var $option = $(\"#select1 option\");
        $option.appendTo(\"#select2\");
      });
      $(\"#remove\").click(function () {
        var $option = $(\"#select2 option:selected\");
        $option.appendTo(\"#select1\");
      });
      $(\"#remove_all\").click(function () {
        var $option = $(\"#select2 option\");
        $option.appendTo(\"#select1\");
      });
    });
  </script>
</head>
<body>
<h3>下拉框应用</h3>
  <table>
    <tr>
      <td>
        <select id=\"select1\" multiple=\"multiple\" style=\"width:100px;\">
          <option value=\"News\">News</option>
          <option value=\"Sport\">Sport</option>
          <option value=\"Education\">Education</option>
          <option value=\"Technology\">Technology</option>
          <option value=\"Art\">Art</option>
        </select>
      </td>
      <td>
        <button id=\"add\">
          >|</button><br />
        <button id=\"add_all\">
          >></button><br />
        <button id=\"remove_all\">
          <<</button><br />
        <button id=\"remove\">
          |<</button>
      </td>
      <td>
        <select id=\"select2\" multiple=\"multiple\" style=\"width:100px;\">
        </select>
      </td>
    </tr>
  </table>
</body>
</html>

运行效果：


本文地址：https://www.stayed.cn/item/18451

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案