关于下拉框左右选择的实例代码-html教程-PHP中文网

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

零下一度

发布： 2017-07-18 13:40:56

原创

1353人浏览过

//下拉框左右选择

<!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="选中添加到右边>>" id="buttonl1">
       <input type="button" value="全部添加到右边>>" id="buttonl2"></div><div class="right"><select name="select2" id="select2" multiple="multiple"><option value="8">选项8</option></select><input type="button" value="<<选中删除到左边" id="buttonr1"><input type="button" value="<<全部删除到左边" id="buttonr2"></div></body></html>

登录后复制