jQuery를 사용하여 목록 상자를 선택적으로 제거하는 방법

jQuery로 목록 상자를 선택적으로 제거하는 방법: 왼쪽 방향의 버튼 클릭 이벤트를 바인딩하면 오른쪽 목록 상자에서 선택한 항목이 왼쪽 목록 상자에 추가되어 제거가 완료됩니다. . 작업, 코드는 [$(this).remove().appendTo(leftSel)]입니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

jQuery를 사용하여 목록 상자를 선택적으로 제거하는 방법:

이 기사에서는 jQuery를 사용하여 왼쪽 및 오른쪽 목록 상자를 구현하는 작업을 설명합니다. 주요 효과는 다음과 같습니다.

1. 왼쪽 및 오른쪽 버튼을 통해 오른쪽 목록 상자를 삭제하거나 항목을 제거합니다.

2. 양쪽 목록 상자에 있는 항목을 두 번 클릭하여 항목을 추가하거나 제거할 수 있습니다.

3. 오른쪽 목록 상자에서 옵션 값을 가져옵니다.

<div class="select_side"> 
   <p>待选区</p> 
   <select id="selectL" name="selectL" multiple="multiple"> 
      <option value="13800138000">王新安 - 13800138000</option> 
      <option value="13800138001">李密 - 13800138001</option> 
      <option value="13800138002">姜瑜 - 13800138002</option> 
      <option value="13800138002">钱书记 - 13800138004</option> 
   </select> 
</div> 
<div class="select_opt"> 
   <p id="toright" title="添加">></p> 
   <p id="toleft" title="移除"><</p> 
</div> 
<div class="select_side"> 
   <p>已选区</p> 
   <select id="selectR" name="selectR" multiple="multiple"> 
   </select> 
</div> 
<div class="sub_btn"><input type="button" id="sub" value="getValue" /></div>

페이지는 좌우 2개의 리스트박스와 조작버튼 항목으로 구성되어 있습니다. CSS를 사용하여 세 가지를 나란히 제어합니다.

CSS

.select_side{float:left; width:200px} 
select{width:180px; height:120px} 
.select_opt{float:left; width:40px; height:100%; margin-top:36px} 
.select_opt p{width:26px; height:26px; margin-top:6px; background:url(arr.gif) no-repeat; 
 cursor:pointer; text-indent:-999em} 
.select_opt p#toright{background-position:2px 0} 
.select_opt p#toleft{background-position:2px -22px}

두 개의 목록 상자를 왼쪽 부동:왼쪽으로 설정하고 작업 버튼 항목도 왼쪽으로 부동하여 주로 3개를 가로로 정렬했습니다. 작업 버튼을 설정할 때 배경 이미지를 사용했다는 점은 주목할 만합니다. 이 이미지에는 아래와 같이 왼쪽 및 오른쪽 화살표가 있는 버튼이 포함되어 있으며, background-position를 사용하여 이미지의 위치를 ​​찾는 방법이 많이 사용되었습니다. 웹사이트에 적용됩니다.

jQuery

먼저 버튼의 클릭 이벤트를 오른쪽 방향으로 바인딩합니다. 버튼을 클릭하면 왼쪽 목록 상자에서 선택한 항목이 오른쪽 목록 상자에 추가되어 추가 작업이 완료됩니다.

var leftSel = $("#selectL"); 
var rightSel = $("#selectR"); 
$("#toright").bind("click",function(){       
    leftSel.find("option:selected").each(function(){ 
        $(this).remove().appendTo(rightSel); 
    }); 
});

마찬가지로 왼쪽 방향에 내장된 버튼의 클릭 이벤트를 바인딩합니다. 버튼을 클릭하면 오른쪽 목록 상자에서 선택한 항목이 왼쪽 목록 상자에 추가되어 제거 작업이 완료됩니다.

$("#toleft").bind("click",function(){        
    rightSel.find("option:selected").each(function(){ 
        $(this).remove().appendTo(leftSel); 
    }); 
});

다음으로 더블클릭 선택 이벤트가 완료되어야 합니다. 항목을 더블클릭하면 해당 항목이 즉시 목록 상자에서 제거되고 반대쪽 목록 상자에 추가됩니다.

leftSel.dblclick(function(){ 
    $(this).find("option:selected").each(function(){ 
        $(this).remove().appendTo(rightSel); 
    }); 
}); 
rightSel.dblclick(function(){ 
    $(this).find("option:selected").each(function(){ 
        $(this).remove().appendTo(leftSel); 
    }); 
});

위 코드는 조금 과하지만 매우 직관적이고 이해하기 쉽습니다. 이러한 작업을 사용하면 목록 상자의 값을 원하는 대로 제어할 수 있습니다.

관련 무료 학습 권장사항: javascript(동영상)

위 내용은 jQuery를 사용하여 목록 상자를 선택적으로 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!