码迷,mamicode.com
首页 > 其他好文 > 详细

多选下拉相互切换

时间:2016-02-25 15:15:56      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

<html>  
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <script src="jquery-2.1.4.min.js"></script>
        <script type="text/javascript">  
            $(function() {  
                //点击"添加"事件  
                $("#add").click(function() {  
                    $("#selectLeft :selected").appendTo("#selectRight");  
                });  
                  
                //点击"添加全部"事件  
                $("#addAll").click(function() {  
                    $("#selectLeft option").appendTo("#selectRight");  
                });  
                  
                //点击"删除"事件  
                $("#remove").click(function() {  
                    $("#selectRight :selected").appendTo("#selectLeft");  
                });  
                  
                //点击"删除全部"事件  
                $("#removeAll").click(function() {  
                    $("#selectRight option").appendTo("#selectLeft");  
                });  
                  
                //双击左选择框事件  
                $("#selectLeft").dblclick(function() {  
                    $("#selectLeft :selected").appendTo("#selectRight");  
                });  
  
                //双击右选择框事件  
                $("#selectRight").dblclick(function() {  
                    $("#selectRight :selected").appendTo("#selectLeft");  
                });               
            });  
        </script>       
          
        <!-- CSS -->  
        <style type="text/css">  
            .content {  
                position: absolute;  
                top: 10px;  
                width: 170px;  
                text-align: center;  
            }  
              
            select {  
                height: 160px;  
                width: 150px;  
            }  
        </style>  
    </head>  
    
    <!-- HTML -->  
    <body>  
        <div class="content">  
            <select id="selectLeft" multiple="multiple">  
                <option value="1">AAAAAAAAAAA</option>  
                <option value="2">BBBBBBBBBBB</option>  
                <option value="3">SSSSSSSSSSS</option>  
                <option value="4">KKKKKKKKKKK</option>  
                <option value="5">EEEEEEEEEEE</option>  
                <option value="6">VVVVVVVVVVV</option>  
                <option value="7">XXXXXXXXXXX</option>  
                <option value="8">YYYYYYYYYYY</option>  
            </select>  
            <div>  
                <button id="add">添加选中项到右边>></button><br />  
                <button id="addAll">添加全部项到右边>></button>  
            </div>  
        </div>  
        <div class="content" style="left: 180px;">  
            <select id="selectRight" multiple="multiple"></select>  
            <div>  
                <button id="remove"><<删除选中项到左边</button><br />  
                <button id="removeAll"><<删除全部项到左边</button>  
            </div>  
        </div>  
    </body>  
</html>  

技术分享

多选下拉相互切换

标签:

原文地址:http://www.cnblogs.com/qhorse/p/5216948.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!