jquery realisiert die Codefreigabe zum Verschieben des Inhalts des Auswahlfelds nach links und rechts

jquery realisiert die Codefreigabe zum Verschieben des Inhalts des Auswahlfelds nach links und rechts_jquery

WBOY

Freigeben： 2016-05-16 15:30:38

Original

1314 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie Sie den Inhalt des Auswahlfelds nach links und rechts verschieben, hinzufügen und löschen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Inhalt des Auswahlfelds wird nach links und rechts verschoben. Dies ist einfach und praktisch. Wählen Sie die Option „Inhalt“ aus und klicken Sie auf die Schaltfläche „Verschieben“, um den Inhalt nach links oder rechts zu verschieben:

Der spezifische Code lautet wie folgt

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen beim Erlernen der Javascript-Programmierung hilfreich sein wird.