将左边框中的元素移到右边框

来源：互联网发布：dnf装备强化数据编辑：程序博客网时间：2024/06/07 14:56

1.页面

<table><tr width="100%" height="300px" style="margin:5px,auto;">    <td width="40%">        <select id="select1" multiple style="margin-left: 10px;">            <option value="apple" selected>苹果</option>             <option value="banana">香蕉</option>         </select>    </td>    <td width="20%" align="center">        <input class="oprationb" id="add" type="button" value=">"/><br>        <input class="oprationb"  id="remove" type="button" value="<"/><br>        <input class="oprationb" id="add_all" type="button" value=">>"/><br>        <input class="oprationb" id="remove_all" type="button" value="<<"/><br>        <input id="mselect" style="width: 50px;margin-top:12px;height: 30px;" type="button" value="确定"/><br>    </td>    <td width="40%" >        <select id="select2" multiple height="300px">        </select>    </td></tr></table>

2.样式

body{ font-family: Tahoma; font-size: 8pt ;}select{    width: 150px;    height: 250px;    border: 1px solid ;}.oprationb{    width:20px;    height: 20px;    margin:5px 5px 5px 5px;}select option {     text-indent: 10px;     font: 14px/20px "Microsoft YaHei";     margin-top: 20px;    color:#00527f}  select option:hover {     background-color: #f80;     color: #fff; }

3.jquery

$(function(){    //移到右边    $('#add').click(function(){        //获取选中的选项，删除并追加给对方        //$('#select1 option:selected').appendTo('#select2');        $('#select1 option:selected').each(function(){            var valk = $(this).val();            var htmlk = $(this).html();            $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>");         })    });    //移到左边    $('#remove').click(function(){       // $('#select2 option:selected').appendTo('#select1');           $('#select2 option:selected').each(function(){           $(this).remove();       });    })    //全部移到右边    $('#add_all').click(function(){        //获取全部的选项,删除并追加给对方        //$('#select1 option').appendTo('#select2');        $('#select1 option').each(function(){            var valk = $(this).val();            var htmlk = $(this).html();            $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>");         });    });    //全部移到左边    $('#remove_all').click(function(){        //$('#select2 option').appendTo('#select1');        $('#select2').empty();    });    //双击选项    $('#select1').dblclick(function(){ //绑定双击事件        //获取全部的选项,删除并追加给对方       // $("option:selected",this).appendTo('#select2'); //追加给对方        var valk = $("option:selected",this).val();        var htmlk = $("option:selected",this).html();        $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>");     });    //双击选项    $('#select2').dblclick(function(){       // $("option:selected",this).appendTo('#select1');        $("option:selected",this).remove();    });});

0 0