使用jQuery如何实现菜单添加移除功能

亚连
Lepaskan: 2018-06-14 10:31:02
asal
2095 orang telah melayarinya

本文通过实例代码给大家分享了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);
  }
Salin selepas log masuk

html代码           

<p class="easyui-layout" data-options="fit:true">
      <p data-options="region:&#39;west&#39;,split:false" style="width:40%;padding:0px">
       <h3 style="padding:5px; border-bottom:1px solid #DDDDDD;">::已授权权限::</h3>
       <p data-options="region:&#39;center&#39;" 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="" />
       </p>
      </p>
      <p data-options="region:&#39;east&#39;" style="width:40%;padding:0px">
       <h3 style="padding:5px;border-bottom:1px solid #DDDDDD;">::未授权权限::</h3>
       <p data-options="region:&#39;center&#39;" style="padding:3px; height:215px;" border="false">
        <select multiple="multiple" id="menuFuncBase" style="width:100%;height:100%">
        </select>
       </p>
      </p>
      <p data-options="region:&#39;center&#39;" 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(&#39;menuFunc&#39;,&#39;menuFuncBase&#39;,&#39;func&#39;)" > < </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(&#39;menuFunc&#39;,&#39;menuFuncBase&#39;,&#39;func&#39;)" ><<</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(&#39;menuFunc&#39;,&#39;menuFuncBase&#39;,&#39;func&#39;)" > > </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(&#39;menuFunc&#39;,&#39;menuFuncBase&#39;,&#39;func&#39;)">>></a><br />  
      </p>
     </p>
Salin selepas log masuk

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在angularjs中如何实现分页和搜索功能

在Nodejs中有关crypto模块安全知识(详细教程)

在Angular中如何实现下拉框模糊查询功能

Atas ialah kandungan terperinci 使用jQuery如何实现菜单添加移除功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan