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
Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente
Vorwort Ich glaube, dass viele Studenten bereits ...
So nummerieren Sie die Ergebnisse von MySQL-Abfragedaten automatisch
Vorwort Tatsächlich bin ich noch nie auf eine Sit...
9 Tipps zur MySQL-Datenbankoptimierung
Inhaltsverzeichnis 1. Wählen Sie die am besten ge...
Vier Möglichkeiten zum Ändern des Standard-CSS-Stils von Element-UI-Komponenten in Vue
Inhaltsverzeichnis Vorwort 1. Verwenden Sie eine ...
So verwenden Sie Typescript zum Kapseln von lokalem Speicher
Inhaltsverzeichnis Vorwort Szenarien für die Verw...
Erklärung des Problems, dass der strikte Modus von JavaScript kein Oktal unterstützt
Was das Problem betrifft, dass der strikte Modus ...
Beispiel für die Verwendung des Supervisors zum Verwalten von Nginx+Tomcat-Containern
brauchen: Verwenden Sie Docker, um den Dualprozes...
Linux Bash: ./xxx: Fehler „Binärdatei kann nicht ausgeführt werden“
Heute habe ich einem Kunden ein kleines Tool für ...
Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen
1. Zeitformatierung und andere Methoden Es wird e...
So kompilieren Sie Nginx neu und fügen Module hinzu
Beim Kompilieren und Installieren von Nginx werde...
MySQL-Tutorial: Ausführliche Erklärung zum Unterabfragebeispiel
Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...
Implementierungsschritte zur Installation eines Redis-Containers in Docker
Inhaltsverzeichnis Redis auf Docker installieren ...
Implementierung der Änderung von Konfigurationsdateien im Docker-Container
1. Betreten Sie den Container docker run [Option]...
Interpretation des Moduls zum Lastenausgleich mit nginx
Inhaltsverzeichnis Zwei Module zur Verwendung von...
Über 3 gängige Pakete der REM-Anpassung
Vorwort Ich habe bereits einen Artikel über REM-A...