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
Zusammenfassung der Ausführungsprobleme zwischen MySQL Max und Where
Ausführungsproblem zwischen MySQL Max und Where S...
Beispielcode für die benutzerdefinierte Scroll-Ansicht des WeChat-Applets
Miniprogramm Benutzerdefinierte Scroll-View-Bildl...
Detaillierte Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS
1. px px ist die Abkürzung für Pixel, eine relati...
Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters
Keepalived+Nginx+Tomcat zur Erzielung eines hochv...
So reduzieren Sie den Speicherverbrauch und die CPU-Auslastung von Webseiten
Manche Webseiten erscheinen möglicherweise nicht ...
Zusammenfassung der grundlegenden Verwendung von JS-Arrays
Vorwort Arrays sind eine spezielle Art von Objekt...
Detaillierte Erklärung zur Lösung des Problems „Position: Fester fester Positionierungsversatz“
Frage Die feste CSS-Positionierung position:fixed...
HTML CSS3 streckt den Bildanzeigeeffekt nicht
1. Verwenden Sie das Transform-Attribut, um das B...
Tutorial zur binären Kompilierung und Installation von MySql centos7 unter Linux
// Ich habe einen ganzen Nachmittag für die Insta...
Verwendung des Linux-Befehls ifconfig
1. Befehlseinführung Der Befehl ifconfig (Netzwer...
Praktische Optimierung des MySQL-Paging-Limits
Vorwort Wenn wir Abfrageanweisungen verwenden, mü...
Die perfekte Lösung für das MySql-Versionsproblem sql_mode=only_full_group_by
1. Überprüfen Sie sql_mode wählen Sie @@sql_mode ...
Detaillierte Erklärung des MySQL-Sicherungsprozesses mit Xtrabackup
Inhaltsverzeichnis 01 Hintergrund 02 Einleitung 0...
Installationsmethode der dekomprimierten Version von MySQL 5.7.18 unter Win7x64
Weiterführende Literatur: Beheben Sie das Problem...
Detaillierte Diskussion über Speicher und Variablenspeicher in JS
Inhaltsverzeichnis Vorwort JS Magische Zahl Numme...