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>
  • 相关阅读:
    [Leetcode] Regular Expression Matching
    [Leetcode] Edit Distance
    计算机科学论文写作3-表、图、例子和其他类似的元素的使用
    计算机科学论文写作2-搜寻、阅读和引用文献
    灰度图与彩图的双边滤波
    opencv6.1-imgproc图像处理模块之平滑与形态学操作
    opencv5-objdetect之级联分类器
    opencv4-highgui之视频的输入和输出以及滚动条
    计算机科学论文写作1-引言
    lecture11-hopfiled网络与玻尔兹曼机
  • 原文地址:https://www.cnblogs.com/plming/p/8177539.html
Copyright © 2011-2022 走看看