省份城市區縣列表-查天氣接口的一個地址接口，地址不精確

<!DOCTYPE html>
<html>
<!-- 查天氣接口的一個地址接口，地址不精確 -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>城市列表</title>
    <link  rel="stylesheet">
    <style type="text/css">

    </style>
</head>

<body>
    <div>
        省份：
        <select id='myProvince'>
            <option>-請選擇省份-</option>
            <option v-for='province in provinceList' v-bind:value='province.cityid'>{{province.city}}</option>
        </select>
        <br>
        城市：
        <select id='myCity'>
            <option>-請選擇城市-</option>
            <option v-for='city in cityList' v-bind:value='city.cityid'>{{city.city}}</option>
        </select>
        <br>
        縣/區：
        <select id='myDistrict'>
            <option>-請選擇縣/區-</option>
            <option v-for='district in districtList' v-bind:value='district.cityid'>{{district.city}}</option>
        </select>
    </div>
    <script src="http://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript">
    var myProvince = new Vue({
        el: "#myProvince",
        data: {
            provinceList: []
        }
    });

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

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

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

    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 == '0') {

                            provinceJson[i] = {
                                city: dataArr[i].city,
                                cityid: dataArr[i].cityid
                            }
                            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');
                        // alert(aOption.length)
                        // alert(aOption[0].value)
                        select[0].onchange = function() {
                            var cityid = select[0].value;
                            var parentid = cityid;
                            console.log(parentid)

                            getCityData(url, parentid)

                        }

                    })
                }

            }
        })

    }
    //獲取城市列表
    function getCityData(url, parentid) {
        $.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(dataArr[i].parentid)
                        if (dataArr[i].parentid == parentid) {
                            console.log(dataArr[i].city)
                                // alert(1)
                            cityJson[i] = {
                                city: dataArr[i].city,
                                cityid: dataArr[i].cityid
                            }
                            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;
                            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].city)
                                // alert(1)
                            districtJson[i] = {
                                city: dataArr[i].city,
                                cityid: dataArr[i].cityid
                            }
                            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)



                    //     }

                    // })
                }

            }
        })
    }
    </script>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容