jQuery如何实现左右两侧菜单添加、移除功能-创新互联

小编给大家分享一下jQuery如何实现左右两侧菜单添加、移除功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联主营临高网站建设的网络公司,主营网站建设方案,重庆APP软件开发,临高h5小程序定制开发搭建,临高网站营销推广欢迎临高等地区企业咨询

效果图：

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" >
       <h4 >::已授权权限::</h4>
       <div data-options="region:'center'"  border="false">
        <select multiple="multiple" id="menuFunc" >
        </select>
        <input type="hidden" name="func" id="func" value="" />
       </div>
      </div>
      <div data-options="region:'east'" >
       <h4 >::未授权权限::</h4>
       <div data-options="region:'center'"  border="false">
        <select multiple="multiple" id="menuFuncBase" >
        </select>
       </div>
      </div>
      <div data-options="region:'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')" >&nbsp;<&nbsp;</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')" >&nbsp;>&nbsp;</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是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

看完了这篇文章，相信你对“jQuery如何实现左右两侧菜单添加、移除功能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：jQuery如何实现左右两侧菜单添加、移除功能-创新互联
分享网址：https://www.cdcxhl.com/article24/cddsje.html

成都网站建设公司_创新互联，为您提供网页设计公司、虚拟主机、定制网站、电子商务、静态网站、网站改版

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联