将一个select中的内容移动到另一个select中-优快云博客

<div class="centent">

        <select multiple id="select1" style="width:130px;height:180px;">

            <option value="1">孙克杰</option>

            <option value="2">朱信宗</option>

            <option value="3">杨帆</option>

            <option value="4">林非比</option>

            <option value="5">亚历山大</option>

            <option value="6">凌峰</option>

            <option value="7">宋松</option>

            <option value="8">王子瑜</option>

        </select>

        <div class="span1">

            <span id="add">右移>></span><br/>

            <span id="add_all">全部>></span>

        </div>

    </div>

    <div class="centent"> 

        <select multiple id="select2" style="width:130px;height:180px">

        </select>

        <div class="span2">

            <span id="remove" style="width:500px">左移<<</span><br/>

            <span id="remove_all">全部<<</span>

        </div>

    </div>

<style type="text/css">

    span{

        border:1px solid black;

        background-color:#99FFFF;

        cursor:pointer;

    }

    .centent{

        width:200px;

        float:left;

    }

    .span1{

        position:absolute;

        top:350px;

        left:150px;

    }

    #add_all{

        position:absolute;

        top:30px;

    }

    .span2{

        position:absolute;

        top:410px;

        left:150px;

    }

    #remove_all{

        position:absolute;

        top:30px;

    }
</style>

<script>

$(function(){      

    $("#add").click(function(){

        var $options = $("#select1 option:selected");//获取选中的选项

        $options.appendTo("#select2");//追加到select2的select中

    });

    $("#add_all").click(function(){

        var $options = $("#select1 option");

        $options.appendTo("#select2");

    });

    //实现双击时，右移

    $("#select1").dblclick(function(){

        var $options = $("#select1 option:selected");

        $options.appendTo("#select2");

    });

    $("#remove").click(function(){

        var $options = $("#select2 option:selected");

        $options.appendTo("#select1");

    });

    $("#remove_all").click(function(){

        var $options = $("#select2 option");

        $options.appendTo("#select1");

    });

    $("#select2").dblclick(function(){

        var $options = $("#select2 option:selected");

        $options.appendTo("#select1");

    });
});
</script>

本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1671376，如需转载请自行联系原作者