1. jQuery 的下拉框左右选择应用

武汉PHP_下拉框左右选择

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    * { margin:0; padding:0; }
    div.centent {
       float:left;
       text-align: center;
       margin: 10px;
    }
    span { 
        display:block; 
        margin:2px 2px;
        padding:4px 10px; 
        background:#898989;
        cursor:pointer;
        font-size:12px;
        color:white;
    }
    </style>
</head>
<body>
    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <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>
        <div>
            <span id="add" >选中添加到右边>></span>
            <span id="add_all" >全部添加到右边>></span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="remove"><<选中删除到左边</span>
            <span id="remove_all"><<全部删除到左边</span>
        </div>
    </div>

<!--   引入jQuery -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    //移到右边
    $('#add').click(function() {
    //获取选中的选项,删除并追加给对方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左边
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右边
    $('#add_all').click(function() {
        //获取全部的选项,删除并追加给对方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左边
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //双击选项
    $(document).on("dblclick", "#select1 option", function(){
       $(this).removeAttr("selected").appendTo('#select2');
    });
    //双击选项
    $(document).on("dblclick", "#select2 option", function(){
       $(this).removeAttr("selected").appendTo('#select1');
    });
});
</script>
</body>
</html>

已添加到喜欢了