关于下拉框左右选择的实例代码

零下一度 原创: 2017-07-18 13:40:56 815浏览

//下拉框左右选择

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.left, .right {float: left;height: 250px;width: 120px;margin-left: 10px;}#select1, #select2 {height: 200px;width: 120px;}</style><script src="js/jquery-1.11.3.min.js?1.1.11"></script><script>   $(function () {
           $("#buttonl1").click(function () {
               $('#select1 option:selected').appendTo('#select2');

           });
           $("#buttonl2").click(function () {               var $reall=$("#select1 option");
              $reall.appendTo($("#select2"));
           })
           $("#buttonr1").click(function () {
               $("#select2 option:selected").appendTo("#select1");
           })
           $("#buttonr2").click(function () {               var $reall=$("#select2 option");
               $reall.appendTo($("#select1"));
           })           //双击选项           $('#select1').dblclick(function(){ //绑定双击事件   //获取全部的选项,删除并追加给对方               $("option:selected",this).appendTo('#select2'); //追加给对方           });           //双击选项           $('#select2').dblclick(function(){
               $("option:selected",this).appendTo('#select1');
           });

       })</script>
       </head>
       <body>
       <div class="left"><select name="select1" id="select1" multiple="multiple">
       <option value="1">选项1</option>
       <option value="2">选项2</option>
       <option value="3">选项3</option>
       <option value="4">选项4</option>
       <option value="5">选项5</option>
       <option value="6">选项6</option>
       <option value="7">选项7</option>
       </select>
       <input type="button" value="选中添加到右边&gt;&gt;" id="buttonl1">
       <input type="button" value="全部添加到右边&gt;&gt;" id="buttonl2"></div><div class="right"><select name="select2" id="select2" multiple="multiple"><option value="8">选项8</option></select><input type="button" value="&lt;&lt;选中删除到左边" id="buttonr1"><input type="button" value="&lt;&lt;全部删除到左边" id="buttonr2"></div></body></html>

以上就是关于下拉框左右选择的实例代码的详细内容，更多请关注php中文网其它相关文章！

选择左右下拉 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Bootstrap警告框的详细介绍下一条：JSTL数据格式化实例详解