JavaScript zum Implementieren eines Dropdown-Listenauswahlfelds
|
In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Implementierung des Dropdown-Listenauswahlfelds zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Erstellen einer Seite ** Zwei Dropdown-Auswahlfelder Tipp: Wählen Sie mehrere Optionen aus, indem Sie die Strg- oder Umschalttaste gedrückt halten und darauf klicken. Der Code lautet wie folgt:
<html>
<Kopf>
<title>HTML-Beispiel</title>
<Stiltyp = "Text/CSS">
div#links{
schweben: links;
}
</Stil>
</Kopf>
<Text>
<div id="links" ">
<div >
<ID auswählen="select1" mehrere="mehrere" Stil="Breite:100px;Höhe:1ss00px">
<option>AAAAAA</option>
<option>BBBBBB</option>
<option>CCCCCC</option>
<option>DDDDDD</option>
<option>EEEEEE</option>
</Auswählen><br/>
</div>
<div>
<input type="button" value="Auswählen und rechts hinzufügen" onclick="selToRight()"/><br/>
<input type="button" value="Alle rechts hinzufügen" onclick="selAllRight()"/>
</div>
</div>
<div id="rechts">
<div >
<ID auswählen="select2" mehrere="mehrere" Stil="Breite:100px;Höhe:1ss00p">
<option>FFFFFF</option>
</Auswählen><br/>
</div>
<div>
<input type="button" value="Auswählen und links hinzufügen" onclick="selToLeft()"/><br/>
<input type="button" value="Alle links hinzufügen" onclick="selAllLeft()"/>
</div>
</div>
</body>
<Skripttyp="text/javascript">
//Auswählen und zur linken Funktion hinzufügen selToLeft(){
//Holen Sie sich das ausgewählte Objekt auf der linken Seite var s1 = document.getElementById("select1");
//Holen Sie sich das ausgewählte Objekt auf der rechten Seite var s2 = document.getElementById("select2");
//Holen Sie sich jede Option im ausgewählten Objekt auf der linken Seite
var ops = s2.getElementsByTagName("Option");
für(var i4=0;i4<ops.length;i4++){
op4=ops[i4];
wenn(op4.selected==true){
s1.appendChild(op4);
ich4--;
}
}
}
//Alles zur linken Funktion hinzufügen selAllLeft(){
//Holen Sie sich das ausgewählte Objekt auf der linken Seite var s1 = document.getElementById("select1");
//Holen Sie sich das ausgewählte Objekt auf der rechten Seite var s2 = document.getElementById("select2");
//Holen Sie sich jede Option im ausgewählten Objekt auf der linken Seite
var ops = s2.getElementsByTagName("Option");
für(var i3=0;i3<ops.length;i3++){
op3=ops[i3];
s1.appendChild(op3);
ich3--;
}
}
//Alles zur rechten Funktion hinzufügen selAllRight(){
//Holen Sie sich das ausgewählte Objekt auf der linken Seite var s1 = document.getElementById("select1");
//Holen Sie sich das ausgewählte Objekt auf der rechten Seite var s2 = document.getElementById("select2");
//Holen Sie sich jede Option im ausgewählten Objekt auf der linken Seite
var ops = s1.getElementsByTagName("Option");
für(var i2=0;i2<ops.length;i2++){
op2=ops[i2];
s2.appendChild(op2);
ich2--;
}
}
//Auswählen und zur rechten Funktion hinzufügen selToRight(){
/*
Schritt:
1. Holen Sie sich die Option in der Auswahl
-getElementByTagName() - gibt ein Array zurück - durchläuft das Array und ruft jede Option ab
2. Bestimmen Sie, ob die Option ausgewählt ist - Attribut ausgewählt, bestimmen Sie, ob es ausgewählt ist - ausgewählt = wahr; ausgewählt - ausgewählt = falsch; nicht ausgewählt 3. Wenn ausgewählt, fügen Sie das ausgewählte Element rechts hinzu 4. Holen Sie sich select2
5. Fügen Sie den ausgewählten Teil hinzu - appendChild()-Methode*/
//Holen Sie sich das ausgewählte Objekt auf der linken Seite var s1 = document.getElementById("select1");
//Holen Sie sich das ausgewählte Objekt auf der rechten Seite var s2 = document.getElementById("select2");
//Holen Sie sich jede Option im ausgewählten Objekt auf der linken Seite
var ops = s1.getElementsByTagName("Option");
//Durchlaufe das Ops-Array, um den ausgewählten Status jeder Option abzurufen for(var i1=0;i1<ops.length;i1++){
op1 = ops[i1];
// Bestimmen Sie, ob das ausgewählte Attribut in jeder Option ausgewählt ist, wenn (op1.selected == true) {
//Wenn ausgewählt, zur Auswahl rechts hinzufügen //-Verwenden Sie die Methode appendChild() s2.appendChild(op1);
//Jede Addition reduziert die Länge des Arrays um eins. Nach i1++ wird die Länge abnormal, daher müssen wir --;
ich1--;
}
}
}
</Skript>
</html>Effektbild:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Für die Verwendung des Docker-Befehls ist kein Sudo erforderlich
>>: HTML+VUE-Paging zur Realisierung einer coolen IoT-Großbildfunktion
Artikel empfehlen
MySQL fragt den aktuellsten Datensatz der SQL-Anweisung ab (Optimierung)
Die schlechteste Option besteht darin, die Ergebn...
MySQL-Datenbank-Entwicklungsspezifikationen [empfohlen]
Vor Kurzem haben wir SQL zur Optimierung online e...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24
MySQL ist das beliebteste relationale Datenbankma...
N Möglichkeiten, Elemente mit CSS zu zentrieren
Inhaltsverzeichnis Vorwort Zentrieren von Inline-...
Vue verwendet el-tree Lazy Loading, um die Funktionen Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.
Über die Baumdarstellung von Vue wird im Projekt ...
Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet
In diesem Artikel wird der spezifische Code für d...
Der gesamte Prozess der Implementierung des Zusammenfassungs-Popup-Fensters mit Vue+Element UI
Szenario: Ein Prüfdokument hat n Prüfdetails und ...
Lösung für das Problem mit verstümmelten chinesischen Schriftzeichen in MySQL unter Ubuntu
Finden Sie das Problem Ich habe vor Kurzem Django...
Eine Sammlung möglicher Probleme bei der Migration von SQLite3 nach MySQL
Kurzbeschreibung Passend für Leser: Mobile Entwic...
Lassen Sie uns ausführlich über den Symboldatentyp in ES6 sprechen
Inhaltsverzeichnis Symboldatentyp Der Grund, waru...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.18 (CentOS7)
So installieren Sie MySQL 5.7.18 unter Linux 1. L...
Implementierung der Validierung mehrerer Elemente im Formular
Im Projekt werden häufig Formulartests durchgefüh...
Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung
Vorwort Durch die Verwendung von Docker und VS Co...
Verwendung von MySQL-Triggern
Inhaltsverzeichnis 1. Trigger-Einführung 1. Was i...
Vor- und Nachteile von Vite und Vue CLI
Es gibt im Vue-Ökosystem ein neues Build-Tool nam...