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

时间：2020-11-27 来源：乌哈旅游
//下拉框左右选择
<!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>