Realisierung von Provinz- und Gemeindeverknüpfungseffekten auf Basis von JavaScript
|
In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung des Verknüpfungseffekts zwischen Provinzen und Städten zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Provinz- und Gemeindeverbindungseffekt</title>
</Kopf>
<body onload="initProvinz()">
Provinz: <select id="province" onchange="fillCity()"></select>
Stadt: <select id="city"></select>
<Skript>
/**
* Provinzfunktion initialisieren */
Funktion initProvince() {
//Deklarieren Sie ein Array zum Speichern von Provinzen let provinceArr=["Provinz Shaanxi", "Provinz Sichuan", "Provinz Henan", "Provinz Shandong"];
//Das Provinz-Array dynamisch in die Dropdown-Liste schreiben //Das Provinzlistenobjekt nach ID abrufen let proovinceObj=document.getElementById("province");
//Legen Sie den Inhalt fest, der angezeigt werden soll, wenn keine Auswahl getroffen wurde. let option=new Option("---Bitte wählen Sie eine Provinz aus---","");
proovinceObj.options.add(option);
//Schleife durch das Provinz-Array für (let province of provinceArr) {
//Optionsobjekt erstellen //Parameter 1: Anzeigeinhalt der Liste //Parameter 2: Attributwert der Optionswerte let option = new Option(province,province);
//Fügen Sie das Optionsobjekt zum ProvinceObj-Objekt hinzu proovinceObj.options.add(option);
}
}
//Ein Städte-Array erstellen //Ein Array zum Speichern von Städten deklarieren let cityArr = new Array();
cityArr['Provinz Shaanxi']=['Xi'an', 'Xianyang', 'Baoji', 'Hanzhong', 'Yan'];
cityArr['Provinz Sichuan']=['Chengdu', 'Dazhou', 'Guangyuan', 'Mianyang', 'Leshan'];
cityArr['Provinz Henan']=['Stadt Zhengzhou', 'Stadt Kaifeng', 'Stadt Luoyang', 'Stadt Xinxiang', 'Stadt Jiaozuo'];
cityArr['Provinz Shandong']=['Stadt Jinan', 'Stadt Qingdao', 'Stadt Laizhou', 'Stadt Yantai', 'Stadt Dezhou'];
/**
* Städte nach Provinzen ausfüllen*/
Funktion fillCity() {
//Die aktuell ausgewählte Provinz abrufen let provinceObj = document.getElementById("province");
let Provinz = ProvinzObjekt.Wert;
//Städtelistenobjekt abrufen let cityObj = document.getElementById("city");
// Lösche die Originaldaten in der Städteliste cityObj.options.length=0;
//Feststellen, ob eine Provinz ausgewählt ist, wenn (Provinz!=""){
let cityOption = new Option("---Bitte wählen Sie eine Stadt---","");
cityObj.options.add(Stadtoption);
}
//Holen Sie sich je nach Provinz das entsprechende Städte-Array und durchlaufen Sie das Städte-Array für (let city of cityArr[province]){
//Jede Stadt in die Städteliste eintragen let cityOption = new Option(city,city);
cityObj.options.add(Stadtoption)
}
}
</Skript>
</body>
</html>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:
|
<<: Einführung in ApplicationHost.config (IIS-Speicherkonfigurationsbereichsdatei)
>>: SQL-Anweisungen in MySQL verwenden keine Indizes
Artikel empfehlen
Express-Projektdateiverzeichnisbeschreibung und detaillierte Funktionsbeschreibung
app.js: Startdatei oder Einstiegsdatei package.js...
Aktivieren Sie OCSP, um die Effizienz der https-Zertifikatsüberprüfung zu verbessern und das Problem des langsamen Zugriffs auf Let’s Encrypt SSL-Zertifikate zu lösen
In den letzten Tagen war der Zugriff auf die Webs...
CSS3 realisiert den verschiebbaren Zauberwürfel-3D-Effekt
Hauptsächlich verwendete Wissenspunkte: •CSS3 3D-...
Wie versteht JS Daten-URLs?
Inhaltsverzeichnis Überblick Erste Schritte mit D...
WeChat Mini-Programm Lotterienummerngenerator
In diesem Artikel wird der spezifische Code des W...
So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts
Ursache So importieren Sie externe Dateien in ein...
Führen Sie die Schritte zum Erstellen einer Laravel-Entwicklungsumgebung mit Docker aus
Vorwort In diesem Artikel verwenden wir Docker, u...
Einführung und detaillierte Verwendung von React Fragment
Inhaltsverzeichnis Vorwort Motivation für Fragmen...
Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow
Um mit Standard-CSS3 den Schatteneffekt eines Ele...
Implementierung von Linux-Dateisystemvorgängen
In dieser Lesenotiz werden hauptsächlich die Vorg...
So implementieren Sie abgerundete Ecken mit CSS3 unter Verwendung von JS
Ich bin auf ein Beispiel gestoßen, als ich nach e...
Detaillierte Erläuterung der Fallstricke beim Mischen von MySQL-Order-By und Limit
In MySQL verwenden wir häufig order by zum Sortie...
Mehrere Möglichkeiten zum Aktualisieren von Batches in MySQL
Normalerweise verwenden wir die folgende SQL-Anwe...
MySQL implementiert Ranking und fragt die angegebene Benutzer-Ranking-Funktion ab (parallele Ranking-Funktion) Beispielcode
Vorwort Dieser Artikel stellt hauptsächlich die r...
3 Codes zur automatischen Aktualisierung von Webseiten
Tatsächlich ist es sehr einfach, diesen Effekt zu ...