zoukankan      html  css  js  c++  java
  • 多选下拉相互切换

    <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;  
                     170px;  
                    text-align: center;  
                }  
                  
                select {  
                    height: 160px;  
                     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>  

  • 相关阅读:
    Create Your Tab and LayerTabMenu In Katana
    Linux C Programing
    Linux C Programing
    dynamics_cast<>
    TBB 学习笔记
    冒泡排序算法
    Spring4学习笔记:Spring框架中为一个bean配置依赖注入的方式
    基数排序算法的Java实现
    堆排序算法的Java实现与分析
    贪心算法
  • 原文地址:https://www.cnblogs.com/qhorse/p/5216948.html
Copyright © 2011-2022 走看看