jQuery implementiert die Drop-Down-Box zur Auswahl des Wohnortes

Der spezifische Code für die Verwendung von jQuery zur Implementierung des Dropdown-Felds zur Auswahl des Wohnorts dient zu Ihrer Information. Der spezifische Inhalt lautet wie folgt

Daten.js

var Daten = [{
        Provinzname: „Provinz Zhejiang“,
        Bereitstellungs-ID: 1,
        Städte: [{
            Stadtname: "Hangzhou",
            Stadt-ID: 101,
            Bereiche: [{
                    Gebietsname: „Hangzhou District 1“,
                    Bereichs-ID: 1011
                },
                {
                    Gebietsname: „Hangzhou District 2“,
                    Bereichs-ID: 1012
                }
            ]
        }, {
            Stadtname: "Wenzhou City",
            Stadt-ID: 102,
            Bereiche: [{
                Gebietsname: „Wenzhou District 1“,
                Bereichs-ID: 1021
            }, {
                Gebietsname: „Wenzhou District 2“,
                Bereichs-ID: 1022
            }]
        }, {
            Stadtname: "Ningbo City",
            Stadt-ID: 103,
            Bereiche: [{
                Gebietsname: 'Ningbo District 1',
                Bereichs-ID: 1031
            }, {
                Gebietsname: 'Ningbo District 2',
                Bereichs-ID: 1032
            }]

        }, {
            Stadtname: "Shaoxing City",
            Stadt-ID: 104,
            Bereiche: [{
                Gebietsname: 'Shaoxing District 1',
                Bereichs-ID: 1041
            }, {
                Gebietsname: 'Shaoxing District 2',
                Bereichs-ID: 1042
            }]

        }]
    }, {
        Provinzname: „Provinz Shandong“,
        Bereitstellungs-ID: 2,
        Städte: [{
            Stadtname: "Jinan City",
            Stadt-ID: 201,
            Bereiche: [{
                    Gebietsname: „Jinan District 1“,
                    Bereichs-ID: 2011
                },
                {
                    Gebietsname: „Jinan District 2“,
                    Bereichs-ID: 2012
                }
            ]
        }, {
            Stadtname: "Qingdao",
            Stadt-ID: 202,
            Bereiche: [{
                Gebietsname: 'Qingdao District 1',
                Bereichs-ID: 2021
            }, {
                Gebietsname: 'Qingdao District 2',
                Bereichs-ID: 2022
            }]
        }, {
            Stadtname: "Jining City",
            Stadt-ID: 203,
            Bereiche: [{
                Gebietsname: 'Jining District 1',
                Bereichs-ID: 2031
            }, {
                Gebietsname: 'Jining District 2',
                Bereichs-ID: 2032
            }]

        }, {
            Stadtname: „Weifang City“,
            Stadt-ID: 204,
            Bereiche: [{
                Gebietsname: 'Weifang District 1',
                Bereichs-ID: 2041
            }, {
                Gebietsname: 'Weifang District 2',
                Bereichs-ID: 2042
            }]

        }]
    },
    {
        Provinzname: „Provinz Guangdong“,
        Bereitstellungs-ID: 3,
        Städte: [{
            Stadtname: "Guangzhou",
            Stadt-ID: 301,
            Bereiche: [{
                    Gebietsname: „Guangzhou District 1“,
                    Bereichs-ID: 3011
                },
                {
                    Gebietsname: „Guangzhou District 2“,
                    Bereichs-ID: 3012
                }
            ]
        }, {
            Stadtname: "Chaoyang City",
            Stadt-ID: 302,
            Bereiche: [{
                Gebietsname: 'Chaoyang District 1',
                Bereichs-ID: 3021
            }, {
                Gebietsname: 'Chaoyang District 2',
                Bereichs-ID: 3022
            }]
        }, {
            Stadtname: "Chenghai City",
            Stadt-ID: 303,
            Bereiche: [{
                Gebietsname: 'Chenghai District 1',
                Bereichs-ID: 3031
            }, {
                Gebietsname: 'Chenghai District 2',
                Bereichs-ID: 3032
            }]

        }, {
            Stadtname: "Chaozhou City",
            Stadt-ID: 304,
            Bereiche: [{
                Gebietsname: 'Chaozhou District 1',
                Bereichs-ID: 3041
            }, {
                Gebietsname: 'Chaozhou District 2',
                Bereichs-ID: 3042
            }]

        }]
    },
    {
        Provinzname: „Provinz Gansu“,
        Bereitstellungs-ID: 4,
        Städte: [{
            Stadtname: "Lanzhou",
            Stadt-ID: 401,
            Bereiche: [{
                    Gebietsname: „Lanzhou District 1“,
                    Bereichs-ID: 4011
                },
                {
                    Gebietsname: „Lanzhou District 2“,
                    Bereichs-ID: 4012
                }
            ]
        }, {
            Stadtname: "Baiyin City",
            Stadt-ID: 402,
            Bereiche: [{
                Gebietsname: 'Silver District 1',
                Bereichs-ID: 4021
            }, {
                Gebietsname: 'Baiyin District 2',
                Bereichs-ID: 4022
            }]
        }, {
            Stadtname: „Dunhuang City“,
            Stadt-ID: 403,
            Bereiche: [{
                Gebietsname: „Dunhuang District 1“,
                Bereichs-ID: 4031
            }, {
                Gebietsname: „Dunhuang District 2“,
                Bereichs-ID: 4032
            }]

        }, {
            Stadtname: "Dingxi City",
            Stadt-ID: 404,
            Bereiche: [{
                Gebietsname: 'Dingxi District 1',
                Bereichs-ID: 4041
            }, {
                Gebietsname: 'Dingxi District 2',
                Bereichs-ID: 4042
            }]

        }]
    }
]

demo.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/data.js"></script>
</Kopf>
<Text>
    <!-- Fügen Sie zuerst drei Dropdown-Listen hinzu-->
    <Name auswählen="prov" ID="prov">

    </Auswählen>
    <select name="Stadt" id="Stadt">

    </Auswählen>
    <select name="Bereich" id="Bereich">
        
    </Auswählen>
    
    <Skript>
        var $prov = $("#prov")
        var $Stadt=$("#Stadt")
        var $bereich=$("#bereich")

        $(Funktion(){
            //Auslösen, nachdem die Seite geladen wurde$.each(data,function(i,e){
                $prov.append('<option value="'+e.provId+'">'+e.provname+'</option>') //Füge das Unterelement newObj am Ende von $obj an

            })
            $prov.prepend('<option value="" selected>Bitte auswählen</option>');
            //Wenn der Provinzname ausgewählt wird, wird das folgende Ereignis ausgelöst: $prov.on("change", function(){
                //Durchquere die Provinz$.each(data,function(i,e){
                    wenn($prov.val()==e.provId){  
                        //Durchquere die Stadt$city.html('<option value="">Bitte auswählen</option>');//Wird verwendet, um die zuvor ausgewählte Stadt zu löschen$.each(e.citys,function(i,e2){
                            $city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>');
                        })
                            
                    }

                })
            })

            //Wenn der Städtename ausgewählt wird, wird das folgende Ereignis ausgelöst: $city.on("change", function(){
                //Durchquere die Provinz$.each(data,function(i,e){
                    wenn($prov.val()==e.provId){
                        $.each(e.citys,Funktion(i,e2){
                            wenn($city.val()==e2.cityId){
                                $area.html('<option value="">Bitte wählen</option>');
                                $.each(e2.areas,Funktion(i,e3){
                                    $area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</option>');
                                })
                            }
                        })
                    }
                })
                    
            })
            

        })
        

    </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:

So verwenden Sie jQuery, um den Text und die Werte des Auswahl-Dropdown-Felds zu bearbeiten
jquery multiSelect Dropdown-Feld für Mehrfachauswahl
Beispielanalyse von auslösenden Ereignissen basierend auf der Auswahl der Dropdown-Box von jQuery
Beispiel für das Abrufen des ausgewählten Werts aus dem Dropdown-Auswahlfeld mithilfe von jQuery und nativem JS
jQuery-Code zum Abrufen des Werts des Dropdown-Felds
jQuery lädt Beispielcode für Auswahl-Dropdown-Feld dynamisch
Combobox in jQuery + easyui realisiert Dropdown-Box-Spezialeffekte
JQuery-Operation Dropdown-Feld (DropDownList) zur Realisierung der Wertzuweisung
jQuery implementiert die Überwachung von Änderungen im ausgewählten Inhalt des Dropdown-Felds
Beispiel für einen kaskadierenden Dropdown-Box-Effekt mit JQuery

<<: Grundlegendes zu MySQL-Sperren basierend auf Update-SQL-Anweisungen

>>: Implementierungsmethode für den Apache AB-Stresstest zur gleichzeitigen Belastung