Comment ajouter et supprimer des menus sur les côtés gauche et droit avec JS

Cette fois, je vais vous montrer comment ajouter et supprimer les menus des côtés gauche et droit avec JS Quelles sont les précautions pour ajouter et supprimer les menus des côtés gauche et droit avec JS. Ce qui suit est un cas pratique, jetons un coup d'œil ensemble.

Rendu :

Code 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);
  }

code 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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Que faut-il faire si la fonction de déclenchement jquery ne peut pas déclencher la balise a

validation du formulaire jquery soumission

sélection de la case jQuery et obtenir de la valeur

Comment implémenter Jquery ajax asynchrone inter-domaines

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!