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
Der HTML-Seitenkopfcode ist völlig klar
Alle folgenden Codes stehen zwischen <head>....
Docker erstellt die Codeerkennungsplattform SonarQube und erkennt den Prozess von Maven-Projekten
1 Einleitung Ein guter Programmierer sollte über ...
Echarts-Beispielcode zur Verwendung mehrerer X-Achsen zur Erstellung einer siebentägigen Wettervorhersage
Inhaltsverzeichnis UI-Design Echarts Beispieleffe...
Spielen Sie mit der Connect-Funktion mit Timeout in Linux
Im vorherigen Artikel haben wir mit Timeouts unte...
Detaillierte Erklärung zur Verwendung des CMD-Befehls zum Bedienen einer MySql-Datenbank
Erstens: Starten und stoppen Sie den MySQL-Dienst...
Detaillierte Erläuterung des Svelte-Implementierungsprinzips für eine einfache und unkomplizierte JavaScript-Entwicklung
Inhaltsverzeichnis Demo1 Fragment erstellen Svelt...
Der JavaScript-Artikel zeigt Ihnen, wie Sie mit Webformularen spielen
1. Einleitung Zuvor haben wir die schnelle Entwic...
Zusammenfassung der HOC-Nutzung von React-High-Order-Komponenten
Ein Satz zur Einführung von HOC Was ist eine Komp...
Mit CSS3 können Sie eine schwebende Wolkenanimation erzielen
Wirkung der Operation html <Kopf> <meta ...
Vue implementiert ein einfaches Einkaufswagenbeispiel
In diesem Artikel wird der spezifische Code von V...
HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife
Beschreibung: Stellen Sie einen Timer ein, um den ...
So verwenden Sie webSocket zum Aktualisieren des Echtzeitwetters in Vue
Inhaltsverzeichnis Vorwort Informationen zu WebSo...
So führen Sie SCSS in ein React-Projekt ein
Laden Sie zuerst die Abhängigkeiten herunter Garn...
Realisierung von Provinz- und Gemeindeverknüpfungseffekten auf Basis von JavaScript
In diesem Artikel wird der spezifische JavaScript...
So installieren Sie schnell eine Tensorflow-Umgebung in Docker
Installieren Sie schnell die Tensorflow-Umgebung ...