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

2019-11-20 10:15:26

字体：大中小

来源：转载

供稿：网友

用到的方法为：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>

运行效果：

jQuery下拉框左右移动