下拉框左右选择

时间：2021-02-10 23:07:11

//下拉框左右选择

<!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"></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>

 

标签：

相关文章