当前位置:主页 > jquery教程 > jQuery 实现左右两侧菜单添加、移除功能

jQuery实现左右两侧菜单添加、移除功能的方法总结

发布:2019-12-04 15:49:18 133


为找教程的网友们整理了jQuery功能相关的编程文章,网友隗醉蝶根据主题投稿了本篇教程内容,涉及到jquery、菜单添加、菜单移除、jQuery 实现左右两侧菜单添加、移除功能相关内容,已被662网友关注,相关难点技巧可以阅读下方的电子资料。

jQuery 实现左右两侧菜单添加、移除功能

效果图:

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" >
       <h3 >::已授权权限::</h3>
       <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'" >
       <h3 >::未授权权限::</h3>
       <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')" > < </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 实现左右两侧菜单添加、移除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!


参考资料

相关文章

  • getJSON调用后台json数据时函数被调用两次的解决方法

    发布:2019-10-01

    近期在做前端开发时候使用到getJSON调用后台json数据,发现后台的函数被调用两次,函数名称为getMessages,下面是本人的一些猜想,感兴趣的朋友可以参考下


  • jquery实现在光标位置插入内容的方法

    发布:2022-04-05

    这篇文章主要介绍了jquery实现在光标位置插入内容的方法,涉及jQuery功能的扩展技巧,具有一定参考借鉴价值,需要的朋友可以参考下


  • 实例分析jQuery设置和移除文本框默认值的方法

    发布:2020-02-10

    这篇文章主要介绍了jQuery设置和移除文本框默认值的方法,实例分析了jQuery操作文本框的技巧,具有一定参考借鉴价值,需要的朋友可以参考下


  • jQuery中next()方法详解

    发布:2020-07-30

    这篇文章主要介绍了jQuery中next()方法用法,实例分析了next()方法的功能、定义及获得匹配元素集合中每个元素紧邻的同辈元素使用技巧,需要的朋友可以参考下


  • jQuery表格元素动态创建功能的实现方法

    发布:2019-11-25

    这篇文章主要为大家详细介绍了jQuery实现表格元素动态创建功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • jQuery动态创建html元素的实例代码和方法

    发布:2019-11-23

    这篇文章主要介绍了jQuery动态创建html元素的常用方法,包括jQuery追加元素、遍历数组以及使用模板等方法,非常具有实用价值,需要的朋友可以参考下


  • 关于jquery map方法使用

    发布:2020-01-13

    jquery的map方法非常好用,其作用是将数组或单个对象,替换为新的内容,在此特向大家分享下


  • Jquery绑定(bind和live的区别介绍)

    发布:2021-08-26

    Jquery中绑定事件有三种方法click、bind、live第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已第二、三种方法都是绑定事件


网友讨论