suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery realisiert die Codefreigabe zum Verschieben des Inhalts des Auswahlfelds nach links und rechts_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:30:381294Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript implementiert das Upload-Format und die Anzahl limit_javascript-FähigkeitenNächster Artikel：Javascript implementiert das Upload-Format und die Anzahl limit_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen