用jQuery实现两个select标签中元素之间的移动

最新推荐文章于 2020-04-14 14:51:20 发布

香妹儿

最新推荐文章于 2020-04-14 14:51:20 发布

阅读量306

点赞数

分类专栏：前端生涯文章标签： select jQuery

本文链接：https://blog.csdn.net/qq_43553184/article/details/84981584

版权

前端生涯专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码如下：（注：jQuery 可自己在官网上下载）

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="jquery-3.3.1.min.js"></script>
       <script>
           $(document).ready(function(){
               $("#i1").click(function(){
                   $("#s1 option:selected").appendTo("#s2");   });
               $("#i3").click(function(){
                   $("#s2 option:selected").appendTo("#s1");   });
               $("#i2").click(function(){
                   $($("#s1").children()).appendTo("#s2");   });
               $("#i4").click(function(){
                   $($("#s2").children()).appendTo("#s1");   });
               });

//双击option所触发的事件
           function move(){
               var x = $("#s1 option:selected");
               var y = $("#s2 option:selected");
               $(x).appendTo("#s2");
               $(y).appendTo("#s1");
           }
       </script>
   </head>
   <body>
       <select multiple="multiple" size="10" id="s1">
           <option οndblclick="move()">选项一</option>
           <option οndblclick="move()">选项二</option>
           <option οndblclick="move()">选项三</option>
           <option οndblclick="move()">选项四</option>
           <option οndblclick="move()">选项五</option>
       </select>
       <input type="button" value="-->" id="i1"/>
       <input type="button" value="==>" id="i2"/>
       <input type="button" value="<--" id="i3"/>
       <input type="button" value="<==" id="i4"/>
       <select multiple="multiple" size="10" id="s2">
           <option οndblclick="move()">选项六</option>
           <option οndblclick="move()">选项七</option>
           <option οndblclick="move()">选项八</option>
           <option οndblclick="move()">选项九</option>
           <option οndblclick="move()">选项十</option>
       </select>
   </body>
</html>

香妹儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现两个select标签中元素之间的移动

代码如下：（注：jQuery 可自己在官网上下载）&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="jquery-3.3.1.min.js"&gt;&lt
复制链接

扫一扫