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
6 Vererbungsmethoden von JS Advanced ES6
Inhaltsverzeichnis 1. Vererbung der Prototypkette...
Detaillierte Erläuterung zur Verwendung von Node.js zum Implementieren einer Hot-Reload-Seite
Vorwort Vor nicht allzu langer Zeit habe ich Brow...
Vue - benutzerdefinierte gekapselte Schaltflächenkomponente
Der benutzerdefinierte Kapselungscode der Vue-But...
So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation
1. Traditionelle Binlog-Master-Slave-Replikation,...
Bezüglich der chinesischen verstümmelten Zeichen bei der Übertragung eines href-Parameters
Wenn href zum Übergeben von Parametern benötigt w...
Nginx verwendet den Gzip-Algorithmus zum Komprimieren von Nachrichten
Was ist HTTP-Komprimierung Manchmal werden relati...
So installieren und ändern Sie das Anfangskennwort von mysql5.7.18 unter Centos7.3
In diesem Artikel erfahren Sie, wie Sie mysql5.7....
Natives JS zum Erzielen eines Schiebeknopfeffekts
Der spezifische Code des mit Js erstellten Schieb...
Detaillierte Erläuterung gängiger Methoden von JavaScript Array
Inhaltsverzeichnis Methoden, die das ursprünglich...
Implementierung der Validierungsregel für Vue Element-ui-Formulare
Inhaltsverzeichnis 1. Einleitung 2. Eingabemodus ...
Detailliertes Tutorial zur Installation von mysql-8.0.13 (ZIP-Installation) auf einem Windows 10-System
Beschreibung der Installationsumgebung •Systemver...
Einrichten der React-Native-Umgebung und grundlegende Einführung
Umgebungsvorbereitung 1. Umweltkonstruktion React...
Informationen zur Installationsmethode für MySQL 8.0.13-ZIP-Pakete
MySQL 8.0.13 verfügt standardmäßig über einen Dat...
So verwenden Sie nginx, um bestimmte URL-Anfragen durch reguläre Ausdrücke abzufangen
Nginx-Server nginx ist ein ausgezeichneter Webser...
jQuery implementiert die Praxis, die Position und Größe von div durch Ziehen der Maus zu ändern
Um einen Windows Forms ähnlichen Effekt zu erziel...