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
Detaillierte Erklärung von Group By und Having in MySQL
Mit der GROUP BY-Syntax können die Abfrageergebni...
Detaillierte Erklärung der React-Komponentenkommunikation
Inhaltsverzeichnis Einführung in die Komponentenk...
So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern
Szenario: Wenn Seite A Seite B öffnet, muss Seite...
Beispiel zum Einrichten eines Linux-Systems zur automatischen Ausführung eines Skripts beim Start
Vorwort Hallo zusammen, ich bin Liang Xu. Bei der...
SQL-Implementierung LeetCode (185. Top drei der höchsten Gehälter in der Abteilung)
[LeetCode] 185. Die drei höchsten Gehälter der Ab...
So stellen Sie MySQL so ein, dass die Groß-/Kleinschreibung nicht beachtet wird
MySQL auf Groß-/Kleinschreibung eingestellt Windo...
So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx
Es gibt zwei Möglichkeiten, mit Nginx mehrere Pro...
Erfahrung mit parallelen React-Funktionen (gleichzeitiger Front-End-Modus)
React ist eine Open-Source-JavaScript-Bibliothek,...
Standardmäßige Stilanordnung für HTML-Tags
html, address,blockquote,body, dd, div,dl, dt, fie...
Dynamische SQL-Anweisungsanalyse in Mybatis
Dieser Artikel stellt hauptsächlich die dynamisch...
Zusammenfassung häufig verwendeter Operatoren und Funktionen in MySQL
Lassen Sie uns zuerst die Datentabelle erstellen....
Detaillierte Erläuterung der Implementierung einer regelmäßigen Sicherung von MySQL-Datenbanktabellen
Durchführung regelmäßiger Backups von Mysql-Daten...
Detaillierte Erklärung des dynamischen Weihnachtsbaums durch JavaScript
Inhaltsverzeichnis 1. Animierter Weihnachtsbaum, ...
Einführung in HTML DOM_PowerNode Java Academy
Was ist DOM? Mit JavaScript können Sie das gesamt...
Lösen Sie das Problem, dass Sie sich bei der Installation von MySQL auf einem Mac mit Homebrew nicht anmelden können
Wenn Ihr Computer ein Mac ist, ist die Verwendung...