집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 선택 상자의 내용을 왼쪽과 오른쪽으로 이동하는 코드 공유를 실현합니다_jquery

jquery는 선택 상자의 내용을 왼쪽과 오른쪽으로 이동하는 코드 공유를 실현합니다_jquery

WBOY원래의: 2016-05-16 15:30:381320검색

이 글의 예시에서는 선택 상자의 내용을 좌우로 이동하고 추가, 삭제하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
선택 선택 상자의 내용은 왼쪽과 오른쪽으로 이동하므로 간단하고 실용적입니다. 옵션 내용을 선택하고 이동 버튼을 클릭하면 내용이 왼쪽이나 오른쪽으로 이동합니다.

구체적인 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>index</title>
</head>
<body>
 <div>
  <select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px">
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
  </select>

  <span style="top: 30px; position: fixed;">
   <input type="button" value="<<" id="btnLeft" />
   <input type="button" value=">>" id="btnRight" />
  </span>
  
  <select id="rightSelector" multiple="multiple" name="SmsListOnRight" style="height:100px; width:50px; margin-left:80px">
   <option value="6">A</option>
   <option value="7">B</option>
   <option value="8">C</option>
   <option value="9">D</option>
   <option value="10">E</option>
  </select>
    
 </div>
 
 <br>
 
 <input type="button" onclick="selectAll()" id="btnSelectAll" value="selectAll" />
 
 <script src="js/jquery-2.1.4.js"></script>
 <script>
  $("#btnRight").click(function () {
   //数据option选中的数据集合赋值给变量vSelect
   var vSelect = $("#leftSelector option:selected");
   //克隆数据添加到 rightSelector 中
   vSelect.clone().appendTo("#rightSelector");
   //同时移除 leftSelector 中的 option
   vSelect.remove();
  });
  
  //right move
  $("#btnLeft").click(function () {
   var vSelect = $("#rightSelector option:selected");
   vSelect.clone().appendTo("#leftSelector");
   vSelect.remove();
  });

  function selectAll() {
   var lst1 = window.document.getElementById("rightSelector");
   var length = lst1.options.length;
   for (var i = 0; i < length; i++) {
    var v = lst1.options[i].value; //option内的value
    var t = lst1.options[i].text; //显示的文本
    alert(v + ":" + t);
   }
  }
 </script>
 
</body>
</html>

이 기사가 자바스크립트 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：Javascript는 uploadify 업로드 형식 및 개수 제한_javascript 기술을 구현합니다.다음 기사：Javascript는 uploadify 업로드 형식 및 개수 제한_javascript 기술을 구현합니다.

jquery는 선택 상자의 내용을 왼쪽과 오른쪽으로 이동하는 코드 공유를 실현합니다_jquery

관련 기사