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请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
9种方法优化jQuery代码详解
Feb 04 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
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
庆元旦活动总结
2014/07/09 职场文书
抗洪救灾标语
2014/10/08 职场文书
清洁工个人工作总结
2015/03/05 职场文书
追悼会家属答谢词
2015/09/29 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android