zoukankan      html  css  js  c++  java
  • Jquery 实现左右两侧菜单添加、移除

    JQ 实现左右两侧菜单添加、移除

    效果图:

    JS代码

         function toRight(l, r, v) {
                $("#" + l + " option:selected").appendTo("#" + r);
                $("#" + l + " option:selected").remove();
                var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
                $("#" + v).val(str);
            }
    
            function allToRight(l, r, v) {
                $("#" + l + " option").appendTo("#" + r);
                $("#" + l + " option").remove();
                var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
                $("#" + v).val(str);
            }
    
            function toLeft(l, r, v) {
                $("#" + r + " option:selected").appendTo("#" + l);
                $("#" + r + " option:selected").remove();
                var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
                $("#" + v).val(str);
            }
    
            function allToLeft(l, r, v) {
                $("#" + r + " option").appendTo("#" + l);
                $("#" + r + " option").remove();
                var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
                $("#" + v).val(str);
            }

    html代码

                <div class="easyui-layout" data-options="fit:true">
                            <div data-options="region:'west',split:false" style="40%;padding:0px">
                                <h3 style="padding:5px; border-bottom:1px solid #DDDDDD;">::已授权权限::</h3>
                                <div data-options="region:'center'" style="padding:3px; height:215px;" border="false">
                                    <select multiple="multiple" id="menuFunc" style="100%;height:100%">
                                    </select>
                                    <input type="hidden" name="func" id="func" value="" />
                                </div>
                            </div>
                            <div data-options="region:'east'" style="40%;padding:0px">
                                <h3 style="padding:5px;border-bottom:1px solid #DDDDDD;">::未授权权限::</h3>
                                <div data-options="region:'center'" style="padding:3px; height:215px;" border="false">
                                    <select multiple="multiple" id="menuFuncBase" style="100%;height:100%">
                                    </select>
                                </div>
                            </div>
                            <div data-options="region:'center'" style="padding:40px;  197px; height:230px;line-height:40px; text-align:center;">  
                                <a href="javascript:;" class="button button-primary button-rounded button-small" onclick="toLeft('menuFunc','menuFuncBase','func')" >&nbsp;<&nbsp;</a><br />
                                <a href="javascript:;" class="button button-primary button-rounded button-small" onclick="allToLeft('menuFunc','menuFuncBase','func')" ><<</a><br />            
                                <a href="javascript:;" class="button button-caution button-rounded button-small" onclick="toRight('menuFunc','menuFuncBase','func')" >&nbsp;>&nbsp;</a><br />
                                <a href="javascript:;" class="button button-caution button-rounded button-small" onclick="allToRight('menuFunc','menuFuncBase','func')">>></a><br />     
                            </div>
                        </div>
  • 相关阅读:
    第二次作业循环语句
    c语言01次作业分支,顺序结构
    PAT 1027. Colors in Mars
    PAT 1026 Table Tennis
    PAT 1035 Password
    PAT 1038. Recover the Smallest Number
    PAT 1028 List Sorting (25)
    PAT 1041 Be Unique (20)
    PAT 1025 PAT Ranking
    1037. Magic Coupon
  • 原文地址:https://www.cnblogs.com/plming/p/8177539.html
Copyright © 2011-2022 走看看