jQuery 实现左右两侧菜单添加、移除功能
更新时间：2018年01月02日 16:30:14 作者：plming
本文通过实例代码给大家分享了jQuery 实现左右两侧菜单添加、移除功能，需要的朋友参考下吧
效果图：
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="width: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="width:100%;height:100%">
</select>
<input type="hidden" name="func" id="func" value="" />
</div>
</div>
<div data-options="region:'east'" style="width: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="width:100%;height:100%">
</select>
</div>
</div>
<div data-options="region:'center'" style="padding:40px; width: 197px; height:230px;line-height:40px; text-align:center;">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-primary button-rounded button-small" onclick="toLeft('menuFunc','menuFuncBase','func')" > < </a><br />
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-primary button-rounded button-small" onclick="allToLeft('menuFunc','menuFuncBase','func')" ><<</a><br />
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-caution button-rounded button-small" onclick="toRight('menuFunc','menuFuncBase','func')" > > </a><br />
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-caution button-rounded button-small" onclick="allToRight('menuFunc','menuFuncBase','func')">>></a><br />
</div>
</div>
总结
以上所述是小编给大家介绍的jQuery 实现左右两侧菜单添加、移除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要是对jQuery 文本框得失焦点的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
这篇文章主要介绍了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能,涉及jQuery事件响应及窗口元素属性的相关操作技巧,需要的朋友可以参考下2017-10-10
这个测试用例的div移动出了点问题，因为是第一次使用jsfiddle网站，所以用的不是很熟悉，还希望高手指点2012-09-09
这篇文章主要介绍了jQuery操作动态生成的内容的方法,对比分析了bind与live方法,说明了live方法在处理新增元素时的作用,需要的朋友可以参考下2016-05-05
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
本文主要介绍jQuery中grep、each、inArray、map的用法，并附实例讲解，非常实用，有需要的朋友可以参考一下。2016-06-06
这篇文章主要为大家详细介绍了基于jquery实现手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了JQuery1.8 如何判断元素是否绑定事件,需要的朋友可以参考下2014-07-07
使用jquery局部刷新(jquery.load)从数据库取出数据
jquery提供了很好的ajax交互，我这里用的是直接返回字符串，用的是jquery.load方法从数据库取出的数据2014-01-01
jquery对表单的基本操作，里面对于checkbox等表单的获取，都有很详细的说明。2010-07-07
这篇文章主要介绍了jQuery对底部导航进行跳转并高亮显示的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
最新评论