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
So lösen Sie das Problem, dass MySQL nicht geschlossen werden kann
Lösung, wenn MySQL nicht geschlossen wird: Klicke...
Semantik, Schreiben und bewährte Methoden für Link A
Die Semantik, der Schreibstil und die Best Practi...
Detaillierte Erläuterung der Mybatis-Sonderzeichenverarbeitung
Vorwort: Mybatis-Sonderzeichenverarbeitung, Verar...
Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen
Die Echtzeitreplikation ist die wichtigste Method...
Detaillierte Schritte zur Installation von MySql 5.7.21 unter Linux
Vorwort Die am häufigsten verwendete Datenbank in...
MySQL-Datenbank implementiert MMM-Hochverfügbarkeitsclusterarchitektur
Konzept MMM (Master-Master-Replikationsmanager fü...
Detaillierte Analyse von GUID-Anzeigeproblemen in Mongodb
Finden Sie das Problem Ich habe kürzlich den Spei...
React useEffect verstehen und verwenden
Inhaltsverzeichnis Vermeiden Sie sich wiederholen...
Vue-Interpretation der responsiven Prinzip-Quellcode-Analyse
Inhaltsverzeichnis Initialisierung initState() in...
Eine kurze Diskussion über MySQL-Ereignisplanungsaufgaben
1. Prüfen Sie, ob das Ereignis aktiviert ist Vari...
MYSQL 5.6 Bereitstellung und Überwachung der Slave-Replikation
MYSQL 5.6 Bereitstellung und Überwachung der Slav...
Zwei Möglichkeiten zur Visualisierung von ClickHouse-Daten mit Apache Superset
Apache Superset ist ein leistungsstarkes BI-Tool,...
Analyse von Context-Anwendungsszenarien in React
Kontextdefinition und Zweck Der Kontext bietet ei...
HTML implementiert die Funktion zur Erkennung der Eingabevervollständigung
Verwenden Sie „onInput(event)“, um festzustellen,...
Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Kennzeichensuche
Eine einfache Nummernschild-Eingabekomponente (vu...