jQuery-从左到右、从右到左

最新推荐文章于 2023-06-13 08:16:29 发布

heliuerya

最新推荐文章于 2023-06-13 08:16:29 发布

阅读量947

点赞数

分类专栏：练习题 jQuery 文章标签： html css jquery

本文链接：https://blog.csdn.net/heliuerya/article/details/130912029

版权

练习题同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

jQuery

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>从左到右、从右到左</title>
   <style type="text/css">
       select {
           width: 100px;
           height: 300px;
       }

       div {
           width: 130px;
           float: left;
           text-align: center;
       }
   </style>
   <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
       //页面加载完毕开始执行
       $(function(){
           //选中添加到右边
           $("button:eq(0)").click(function(){
               //select标签中name=sel01的元素里被选中的元素执行循环函数
               $("select[name=sel01] :selected").each(function(){
                   //alert(this);
                   //appendTo() 比如：a.appendTo(b) 表示把 a 插入到 b 子元素末尾，成为最后一个子元素
                   $(this).appendTo("select[name=sel02]");
               });
           });

           //全部添加到右边
           $("button:eq(1)").click(function(){
               //选定select标签中name=sel01里面所有的option元素，执行循环函数
               $("select[name=sel01] option").each(function(){
                   //alert(this);
                   $(this).appendTo("select[name=sel02]");
               });
           });

           //选中删除到左边
           $("button:eq(2)").click(function(){
               $("select[name=sel02] :selected").each(function(){
                   //alert(this);
                   $(this).appendTo("select[name=sel01]");
               });
           });
           //全部删除到左边
           $("button:eq(3)").click(function(){
               $("select[name=sel02] option").each(function(){
                   //alert(this);
                   $(this).appendTo("select[name=sel01]");
               });
           });
       });
   </script>
</head>
<body>
   <div id="left">
       <select multiple="multiple" name="sel01">
           <option value="opt00">选项00</option>
           <option value="opt01">选项01</option>
           <option value="opt02">选项02</option>
           <option value="opt03">选项03</option>
           <option value="opt04">选项04</option>
           <option value="opt05">选项05</option>
           <option value="opt06">选项06</option>
           <option value="opt07">选项07</option>
           <option value="opt08">选项08</option>
           <option value="opt08">选项10</option>
           <option value="opt08">选项11</option>
           <option value="opt08">选项12</option>
           <option value="opt08">选项13</option>
           <option value="opt08">选项14</option>
           <option value="opt08">选项15</option>
           <option value="opt08">选项16</option>
       </select>
       <br/>
       <br/>
       <button>选中添加到右边</button>
       <button>全部添加到右边</button>
   </div>
   <div id="right">
       <select multiple="multiple" name="sel02">
       </select>
       <br/>
       <br/>
       <button>选中删除到左边</button>
       <button>全部删除到左边</button>
   </div>
</body>
</html>

浏览器显示效果：

heliuerya

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery-从左到右、从右到左

选项10</option><option value="opt08">选项11</option><option value="opt08">选项12</option><option value="opt08">选项13</option><option value="opt08">选项14</option><option value="opt08">选项15
复制链接

扫一扫