欢迎光临
我的个人博客网站

jQuery使用appendTo()函数实现Select下拉列表项的左右移动


今天jQuery学习到appendTo()函数时,定义为在被选元素的结尾插入HTML元素。
于是利用该函数做了两个Select下拉列表项左右选择移动的功能,以下为完整代码:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>使用appendTo实现Select下拉列表项的左右移动</title>     <style type="text/css">         select {             width: 110px;             height: 95px;         }          body {             text-align: center;         }          div {             width: 130px;             display: inline-block;         }      </style>     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>     <script type="text/javascript">         $(function () {             // 选中选项添加到右边按钮功能             $(":button:eq(0)").click(function () {                 $("select[name='sel1'] option:selected").appendTo("select[name='sel2']");             });              // 全部选项添加到右边按钮功能             $(":button:eq(1)").click(function () {                 $("select[name='sel1'] option").appendTo("select[name='sel2']");             });              // 选中选项添加到左边按钮功能             $(":button:eq(2)").click(function () {                 $("select[name='sel2'] option:selected").appendTo("select[name='sel1']");             });              // 全部选项添加到左边按钮功能             $("button:eq(3)").click(function () {                 $("select[name='sel2'] option").appendTo("select[name='sel1");             });         });     </script> </head> <body> <div id="left">     <!--multiple属性规定可同时选择多个选项-->     <select size="5" multiple="multiple" name="sel1">         <option value="opt1">选项一</option>         <option value="opt2">选项二</option>         <option value="opt3">选项三</option>         <option value="opt4">选项四</option>         <option value="opt5">选项五</option>     </select>     <button>选中添加到右边</button>      <button>全部添加到右边</button> </div> <div id="right">     <!--对于 windows:按住 Ctrl 按钮来选择多个选项         对于 Mac:按住 command 按钮来选择多个选项-->     <select multiple="multiple" name="sel2">     </select>     <button>选中添加到左边</button>     <button>全部添加到左边</button> </div> </body> </html> 
代码运行效果:

jQuery使用appendTo()函数实现Select下拉列表项的左右移动

赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery使用appendTo()函数实现Select下拉列表项的左右移动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏