JS로 왼쪽과 오른쪽에 메뉴를 추가하고 제거하는 방법

이번에는 JS로 왼쪽, 오른쪽 메뉴를 추가하고 제거하는 방법을 보여드리겠습니다. JS로 왼쪽, 오른쪽 메뉴를 추가하고 제거하는 방법에 대한 주의사항은 다음과 같습니다. 살펴보자. Rendering : endjs 코드

 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 Code

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

이 기사에서 사례를 읽은 후 방법을 마스터했다고 생각하십시오. PHP 중국어 웹사이트에서!

권장 자료: ujquery 트리거 함수는 A 레이블을 트리거할 수 없습니다.

JQUERY 양식 확인을 처리하고

JQUERY 확인란을 선택하여 값을 가져오는 방법

jqury Ajax 비동기 방법 도메인 간 달성을 위해

위 내용은 JS로 왼쪽과 오른쪽에 메뉴를 추가하고 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!