jQueryは居住地を選択するためのドロップダウンボックスを実装します

varデータ = [{
        州名: '浙江省'、
        提供: 1,
        都市: [{
            都市名: "杭州",
            都市ID: 101,
            エリア: [{
                    エリア名: "杭州1区",
                    エリアID: 1011
                },
                {
                    エリア名: "杭州第2区",
                    エリアID: 1012
                }
            ]
        }, {
            都市名:「温州市」、
            都市ID: 102,
            エリア: [{
                エリア名: '温州1区',
                エリアID: 1021
            }, {
                エリア名: '温州第2区',
                エリアID: 1022
            }]
        }, {
            都市名: "寧波市",
            都市ID: 103,
            エリア: [{
                エリア名: '寧波1区'、
                エリアID: 1031
            }, {
                エリア名: '寧波第2区',
                エリアID: 1032
            }]

        }, {
            都市名:「紹興市」、
            都市ID: 104,
            エリア: [{
                エリア名: '紹興市1区',
                エリアID: 1041
            }, {
                エリア名: '紹興市2区',
                エリアID: 1042
            }]

        }]
    }, {
        provname: 「山東省」、
        提供: 2,
        都市: [{
            都市名: "済南市",
            都市ID: 201,
            エリア: [{
                    エリア名: "済南1区",
                    エリアID: 2011
                },
                {
                    エリア名: "済南2区",
                    エリアID: 2012
                }
            ]
        }, {
            都市名: "青島",
            都市ID: 202,
            エリア: [{
                エリア名: '青島1区',
                エリアID: 2021
            }, {
                エリア名: '青島2区',
                エリアID: 2022
            }]
        }, {
            都市名: "済寧市",
            都市ID: 203,
            エリア: [{
                エリア名: '済寧1区',
                エリアID: 2031
            }, {
                エリア名: '済寧区2',
                エリアID: 2032
            }]

        }, {
            都市名:「濰坊市」
            都市ID: 204,
            エリア: [{
                エリア名: '濰坊1区',
                エリアID: 2041
            }, {
                エリア名: '濰坊2区',
                エリアID: 2042
            }]

        }]
    },
    {
        provname: '広東省'、
        提供: 3,
        都市: [{
            都市名: "広州",
            都市ID: 301,
            エリア: [{
                    エリア名: "広州1区",
                    エリアID: 3011
                },
                {
                    エリア名: "広州2区",
                    エリアID: 3012
                }
            ]
        }, {
            都市名:「朝陽市」、
            都市ID: 302,
            エリア: [{
                エリア名: '朝陽1区',
                エリアID: 3021
            }, {
                エリア名: '朝陽区2',
                エリアID: 3022
            }]
        }, {
            都市名:「澄海市」、
            都市ID: 303,
            エリア: [{
                エリア名: '澄海1区',
                エリアID: 3031
            }, {
                エリア名: '澄海区2',
                エリアID: 3032
            }]

        }, {
            都市名:「潮州市」、
            都市ID: 304,
            エリア: [{
                エリア名: '潮州1区',
                エリアID: 3041
            }, {
                エリア名: '潮州第2区',
                エリアID: 3042
            }]

        }]
    },
    {
        州名: '甘粛省'、
        提供: 4,
        都市: [{
            都市名: "蘭州",
            都市ID: 401,
            エリア: [{
                    エリア名: "蘭州1区",
                    エリアID: 4011
                },
                {
                    エリア名: "蘭州2区",
                    エリアID: 4012
                }
            ]
        }, {
            都市名: "白銀市",
            都市ID: 402,
            エリア: [{
                エリア名: 'シルバー地区1',
                エリアID: 4021
            }, {
                エリア名: '白銀区2',
                エリアID: 4022
            }]
        }, {
            都市名:「敦煌市」
            都市ID: 403,
            エリア: [{
                エリア名: '敦煌1区',
                エリアID: 4031
            }, {
                エリア名: '敦煌第2区',
                エリアID: 4032
            }]

        }, {
            都市名: "定西市",
            都市ID: 404,
            エリア: [{
                エリア名: '頂渓1区',
                エリアID: 4041
            }, {
                エリア名: '頂西2区',
                エリアID: 4042
            }]

        }]
    }
]

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/data.js"></script>
</head>
<本文>
    <!-- 最初に 3 つのドロップダウン リストを追加します -->
    <select name="prov" id="prov">

    </選択>
    <名前を選択="都市" id="都市">

    </選択>
    <選択名="エリア" id="エリア">
        
    </選択>
    
    <スクリプト>
        var $prov = $("#prov")
        var $city=$("#city")
        var $area=$("#area")

        $(関数(){
            //ページが読み込まれた後にトリガー$.each(data,function(i,e){
                $prov.append('<option value="'+e.provId+'">'+e.provname+'</option>') //サブ要素 newObj を $obj の末尾に追加します

            })
            $prov.prepend('<option value="" selected>選択してください</option>');
            // 州名が選択されると、次のイベントがトリガーされます $prov.on("change", function(){
                //州を横断する$.each(data,function(i,e){
                    $prov.val() == e.provIdの場合{  
                        //都市をトラバースします$city.html('<option value="">選択してください</option>');//以前に選択した都市をクリアするために使用します$.each(e.citys,function(i,e2){
                            $city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>');
                        })
                            
                    }

                })
            })

            //都市名が選択されると、次のイベントがトリガーされます $city.on("change", function(){
                //州を横断する$.each(data,function(i,e){
                    $prov.val() == e.provIdの場合{
                        $.each(e.citys,function(i,e2){
                            $city.val() == e2.cityIdの場合{
                                $area.html('<option value="">選択してください</option>');
                                $.each(e2.areas,function(i,e3){
                                    $area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</option>');
                                })
                            }
                        })
                    }
                })
                    
            })
            

        })
        

    </スクリプト>
</本文>
</html>