首页 > > 网页制作 > css >

下拉框左右选择

2018-06-24 01:34:47来源：未知阅读 ()

//下拉框左右选择

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