select左右選擇組件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://www.internetke.com/jsEffects/2015011202/js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        .select-body{
            text-align: center;
            width: 60%;
            margin: 0 auto;
        }
        .header{
            text-align: center;
        }
        .select-left,.select-right{
            width:150px;
            min-height:200px;
        }
        .btn-bar input{
            width:50px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>select左右選擇組件</h2>   
    </div>
    <div class="row select-body">
        <div class="span2">
            <select multiple="multiple" id="select1" class="select-left">
                <option value="超級管理員">超級管理員</option>
                <option value="普通管理員">普通管理員</option>
                <option value="信息發(fā)布員">信息發(fā)布員</option>
                <option value="財務(wù)管理員">財務(wù)管理員</option>
                <option value="產(chǎn)品管理員">產(chǎn)品管理員</option>
                <option value="資源管理員">資源管理員</option>
                <option value="系統(tǒng)管理員">系統(tǒng)管理員</option>
                <option value="超級管理員">超級管理員</option>
                <option value="普通管理員">普通管理員</option>
                <option value="信息發(fā)布員">信息發(fā)布員</option>
                <option value="財務(wù)管理員">財務(wù)管理員</option>
                <option value="產(chǎn)品管理員">產(chǎn)品管理員</option>
                <option value="資源管理員">資源管理員</option>
                <option value="科e互聯(lián)">科e互聯(lián)</option>
            </select>
        </div>
        <div class="span2">
            <div class="btn-bar">
                <p><span id="add"><input type="button" class="btn" value=">" title="移動選擇項到右側(cè)"></span></p>
                <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右側(cè)"></span></p>
                <p><span id="remove"><input type="button" class="btn" value="<" title="移動選擇項到左側(cè)"></span></p>
                <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左側(cè)"></span></p>
            </div>
        </div>
        <div class="span2">
            <select multiple="multiple" id="select2" class="select-right">
            </select>
        </div>
    </div>

    <script type="text/javascript">
        $("#add").bind("click",function(){
            if(!$("#select1 option").is(":selected"))
            {
                alert("選擇項為空");
            }
            $("#select1 option:selected").appendTo("#select2");
        });
        $("#remove").bind("click",function(){
            if(!$("#select2 option").is(":selected"))
            {
                alert("選擇項為空");
            }
            $("#select2 option:selected").appendTo("#select1");
        });
        $("#add_all").bind("click",function(){
            $("#select1 option").appendTo("#select2");
        });
        $("#remove_all").bind("click",function(){
            $("#select2 option").appendTo("#select1");
        });
        $("#select1").bind("dblclick",function(){
            $("#select1 option:selected").appendTo("#select2");
        })
        $("#select2").bind("dblclick",function(){
            $("#select2 option:selected").appendTo("#select1");
        })

    </script>
</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容