JavaScript zur einfachen Verknüpfung von Provinzen und Gemeinden
|
In diesem Artikel wird der spezifische Code für JavaScript zur einfachen Verknüpfung von Provinzen und Gemeinden zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Schritt * Erstellen Sie eine Seite mit zwei Dropdown-Auswahlfeldern 1. Durchlaufen Sie ein zweidimensionales Array 2. Das Ergebnis ist ebenfalls ein Array (Länderkorrespondenz) 3. Holen Sie sich den ersten Wert im Array und vergleichen Sie ihn mit dem übergebenen Wert 4. Wenn sie gleich sind, holen Sie sich das Element nach dem ersten Wert 5. Holen Sie sich die Städteauswahl 6. Fügen Sie die vergangene (verwendete) appendChild-Methode hinzu /* * Prüfen Sie vor jedem Hinzufügen, ob in der Stadt eine Option vorhanden ist. Wenn ja, löschen Sie diese Der Code lautet wie folgt:
<html>
<Kopf>
<title>Provinzielle und kommunale Verknüpfung</title>
<Stiltyp = "Text/CSS">
</Stil>
</Kopf>
<Text>
<select id="countyid" onchange="add1(this.value)">
<option value="0">--Bitte wählen--</option>
<option value="China">China</option>
<option value="Vereinigte Staaten">Vereinigte Staaten</option>
<option value="Vereinigtes Königreich">Vereinigtes Königreich</option>
<option value="Option">Option</option>
</Auswählen>
<Wählen Sie id="Stadt-ID" >
</Auswählen>
</body>
<Skripttyp="text/javascript">
var arr = neues Array(4);
arr[0]=["China","Peking","Shanghai","Shenzhen","Hangzhou"];
arr[1]=["Vereinigte Staaten","Washington","New York","Detroit","Chicago"];
arr[2]=["Vereinigtes Königreich","London","Birmingham","Leeds","Liverpool"];
arr[3]=["Japan","Tokio","Osaka","Hokkaido","Nagasaki"];
/*
Schritt:
1. Durchlaufe das zweidimensionale Array. 2. Hole eine Array-Land-Korrespondenz. 3. Vergleiche den ersten Wert im Array mit dem übergebenen Wert. 4. Wenn sie gleich sind, hole die Elemente nach dem ersten Wert. 5. Hole die Städteauswahl.
6. Fügen Sie die Vergangenheit hinzu - appendChild-Methode - Option erstellen (drei Schritte)
Da Sie jedes Mal eine Option zur Stadt hinzufügen müssen
Wenn Sie es ein zweites Mal hinzufügen, wird es angehängt.
*Überprüfen Sie vor jedem Hinzufügen, ob in der Stadt eine Option vorhanden ist. Wenn ja, löschen Sie diese.*/
Funktion add1(Wert){
//Holen Sie sich die Auswahl in der Stadt
var city1 = document.getElementById("cityid");
var ops = city1.getElementsByTagName("Option");
für(var m=0;m<ops.length;m++){
var op = ops[m];
city1.removeChild(op);
M--;
}
für(var i=0;i<arr.length;i++){
arr1=arr[i];
var ersterWert = arr1[0];
wenn (ersterWert == Wert)
{
//Option erstellen
für(var j=1;j<arr1.length;j++){
var Wert1 = arr1[j];
var option1=document.createElement("option");
var text1 = document.createTextNode(Wert1);
option1.appendChild(text1);
city1.appendChild(option1);
}
}
}
}
</Skript>
</html>Demonstration des Wirkungsdiagramms:
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:
|
<<: Schritte zum Einrichten und Mounten freigegebener Ordner auf Windows-Host und Docker-Container
>>: Lösung für das Problem, dass HTML2-Canvas-SVG nicht erkannt wird
Artikel empfehlen
Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist
Als ich kürzlich Webseiten mit PHP schrieb, habe i...
Vue implementiert eine kleine Countdown-Funktion
In vielen Projekten muss eine Countdown-Funktion ...
Verwendung des Linux-SFTP-Befehls
Konzept von SFTP sftp ist die Abkürzung für Secur...
MySql 8.0.11-Winxp64 (kostenlose Installationsversion) Konfigurations-Tutorial
1. Entpacken Sie das Zip-Paket in das Installatio...
Implementierungsmethode für die Kapselung von Vue3-Navigationsleistenkomponenten
Kapseln Sie eine Navigationsleistenkomponente in ...
Kopieren und Einfügen ist der Feind der Verpackung
Bevor wir über OO, Entwurfsmuster und die vielen o...
Beispiel für utf8mb4-Sortierung in MySQL
Allgemeine utf8mb4-Sortierregeln in MySQL sind: u...
Befehle zum Suchen der Domänen-IP-Adresse im Linux-Terminal (fünf Methoden)
In diesem Tutorial wird erklärt, wie Sie die IP-A...
Erstellen einer verteilten Selenium-Umgebung basierend auf Docker
1. Laden Sie das Bild herunter Docker-Pull Seleni...
Detailliertes Beispiel für das Datenbankbetriebsobjektmodell in Spring jdbc
Detailliertes Beispiel für das Datenbankbetriebso...
CSS3 erzielt einen coolen 3D-Rotationsperspektiveneffekt
CSS3 erreicht coole 3D-Rotationsperspektive 3D-An...
HTML-Tabellen-Tag-Tutorial (35): spaltenübergreifendes Attribut COLSPAN
In einer komplexen Tabellenstruktur erstrecken si...
DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)
DOCTYPE-DEKLARATION: Oben auf jeder Seite, die Sie...
Vue: Detaillierte Erklärung von Speicherlecks
Was ist ein Speicherleck? Ein Speicherleck bedeut...
SSH-Portweiterleitung, lokale Portweiterleitung, Remote-Portweiterleitung, dynamische Portweiterleitungsdetails
Teil 1 Übersicht über die SSH-Portweiterleitung H...