实现下拉列表选中条目左右选择功能

最新推荐文章于 2024-04-26 16:47:03 发布

Justin chen

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量505

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44261815/article/details/129804291

版权

<!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;
            width: 100px;
            height: 300px;
         }
         #toRight,#toLeft{
            margin-top:100px ;
            margin-left:30px;
            width: 50px;
         }

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

      <script>

         //需求：实现下拉列表选中条目左右选择功能
         
         $(function () {
            //toRight
            $("#toRight").click(function () {
               //获取右边的下拉列表对象，append(左边下拉列表选中的option)
               $("#rightName").append($("#leftName > option:selected"));
                });

                //toLeft
                $("#toLeft").click(function () {
                    //appendTo   获取右边选中的option，将其移动到左边下拉列表中
               $("#rightName > option:selected").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>