성, 도시, 현 목록 - 도시 목록 전용 확장 우편번호, 지역 번호

    
    
    
    
    



    

         ：
        
            - -
            {{province.name}}
        
        
  ：
        
            - -
            {{city.name}}
        
        
  / ：
        
            - / -
            {{district.name}}
        
    
    
    
    
    var myProvince = new Vue({
        el: "#myProvince",
        data: {
            provinceList: []
        }
    });

    var myCity = new Vue({
        el: "#myCity",
        data: {
            cityList: []
        }
    })

    var myDistrict = new Vue({
        el: "#myDistrict",
        data: {
            districtList: []
        }
    })

    var parentid = 0;
    var url = 'http://api.jisuapi.com/area/query?parentid=' + parentid + '&appkey=a862ded1133c3f89';

    getProvinceData(url, parentid);

    function getProvinceData(url, parentid) {
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'jsonp',
            success: function(data) {
                if (data.status == parentid) {
                    var dataArr = data.result;
                    var provinceArr = [];
                    var provinceJson = {}
                    for (var i = 0; i < dataArr.length; i++) {
                        if (dataArr[i].parentid == parentid) {

                            provinceJson[i] = {
                                id: dataArr[i].id,
                                name: dataArr[i].name,
                                areacode: dataArr[i].areacode,
                                zipcode: dataArr[i].zipcode,
                            }
                            provinceArr.push(provinceJson[i])
                                // provinceIdArr.push(dataArr[i].cityid)
                        }
                    }
                    console.log(provinceArr)
                        // console.log(provinceIdArr)
                    myProvince.provinceList = provinceArr;
                    myProvince.$nextTick(function() {
                        var select = document.getElementsByTagName('select');
                      
                        select[0].onchange = function() {
                            var cityid = select[0].value;
                            var parentid = cityid;
                            var url = 'http://api.jisuapi.com/area/query?parentid=' + parentid + '&appkey=a862ded1133c3f89';
                          
                            getCityData(url, parentid)

                        }

                    })
                }

            }
        })

    }
    // 
    function getCityData(url, parentid) {
        console.log(url)
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'jsonp',
            success: function(data) {
                if (data.status == '0') {
                    var dataArr = data.result;
                    var cityArr = [];
                    var cityJson = {}
                    console.log(dataArr.length); //2595
                    for (var i = 0; i < dataArr.length; i++) {
                        console.log(parentid)
                        console.log(dataArr[i].parentid)
                        if (dataArr[i].parentid == parentid) {
                            console.log(dataArr[i].name)

                            cityJson[i] = {
                                id: dataArr[i].id,
                                name: dataArr[i].name,
                                areacode: dataArr[i].areacode,
                                zipcode: dataArr[i].zipcode,
                            }
                            console.log(cityJson[i])
                            cityArr.push(cityJson[i])
                        }
                    }
                    console.log(cityArr)
                    myCity.cityList = cityArr;

                    myCity.$nextTick(function() {
                        var select = document.getElementsByTagName('select');
                        // alert(aOption.length)
                        // alert(aOption[0].value)
                        select[1].onchange = function() {
                            var cityid = select[1].value;

                            // alert(cityid)
                            var parentid = cityid;
                             var url = 'http://api.jisuapi.com/area/query?parentid=' + parentid + '&appkey=a862ded1133c3f89';
                            console.log(parentid)

                             getDistrictData(url, parentid)

                        }

                    })
                }

            }
        })
    }

    function getDistrictData(url, parentid) {
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'jsonp',
            success: function(data) {
                if (data.status == '0') {
                    var dataArr = data.result;
                    var districtArr = [];
                    var districtJson = {}
                    console.log(dataArr.length); //2595
                    for (var i = 0; i < dataArr.length; i++) {
                        // console.log(dataArr[i].parentid)
                        if (dataArr[i].parentid == parentid) {
                            console.log(dataArr[i].name)
                                // alert(1)
                            districtJson[i] = {
                                id: dataArr[i].id,
                                name: dataArr[i].name,
                                areacode: dataArr[i].areacode,
                                zipcode: dataArr[i].zipcode,
                            }
                            console.log(districtJson[i])
                            districtArr.push(districtJson[i])
                        }
                    }
                    console.log(districtArr)
                    myDistrict.districtList = districtArr;

                    // myCity.$nextTick(function() {
                    //     var select = document.getElementsByTagName('select');
                    //     // alert(aOption.length)
                    //     // alert(aOption[0].value)
                    //     select[1].onchange = function() {
                    //         var cityid = select[1].value;

                    //         alert(cityid)
                    //         var parentid = cityid;
                    //         console.log(parentid)



                    //     }

                    // })
                }

            }
        })
    }