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


Posted in jQuery onJanuary 02, 2018

效果图:

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 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
基于jquery.page.js实现分页效果
Jan 01 #jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
You might like
快速配置PHPMyAdmin方法
2008/06/05 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
json 定义
2008/06/10 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python argv用法详解
2016/01/08 Python
Linux下python3.7.0安装教程
2018/07/30 Python
Python实现Linux监控的方法
2019/05/16 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
wxPython实现绘图小例子
2019/11/19 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
公务员保密承诺书
2014/03/27 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
产品设计开发计划书
2014/05/07 职场文书
综治维稳工作汇报
2014/10/27 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
家长会主持词开场白
2015/05/29 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS