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

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
            }]

        }]
    }
]

<!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>