左右移动

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script  src="../../js/jquery-3.3.1.min.js"></script>


      <style>
         #leftName , #btn,#rightName{
            float: left;
             100px;
            height: 300px;
         }
         #toRight,#toLeft{
            margin-top:100px ;
            margin-left:30px;
             50px;
         }

         .border{
            height: 500px;
            padding: 100px;
         }
      </style>

      <script>
             $(function () {
                 //需求：实现下拉列表选择条目左右选择功能
                $("#toRight").click(function () {
               $("#leftName>option:checked").appendTo($("#rightName"));
                });

                 $("#toLeft").click(function () {
                     $("#rightName>option:checked").appendTo($("#leftName"));
                 });
             });


      </script>



   </head>
   <body>
      <div class="border">
         <select id="leftName" multiple="multiple">
            <option>张三</option>
            <option>李四</option>
            <option>王五</option>
            <option>赵六</option>
         </select>
         <div id="btn">
            <input type="button" id="toRight" value="-->"><br>
            <input type="button" id="toLeft" value="<--">

         </div>

         <select id="rightName" multiple="multiple">
            <option>钱七</option>
         </select>

      </div>


   </body>
</html>

相关阅读:
ADO.Net对Oracle数据库的操作（转）
代码反思(1)
继承与多态
存储过程
linux学习流程及内容概括
Linux下终端快捷键
查找算法
epoll解读
TCP/udp编程
如何学习嵌入式

原文地址：https://www.cnblogs.com/newcityboy/p/11520905.html