省份城市區(qū)縣列表-城市列表專用可擴(kuò)展查郵編，區(qū)號(hào)

<!DOCTYPE html>
<html>
<!-- 城市列表專用可擴(kuò)展查郵編，區(qū)號(hào) -->
<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>-請(qǐng)選擇省份-</option>
            <option v-for='province in provinceList' v-bind:value='province.id'>{{province.name}}</option>
        </select>
        <br> 城市：
        <select id='myCity'>
            <option>-請(qǐng)選擇城市-</option>
            <option v-for='city in cityList' v-bind:value='city.id'>{{city.name}}</option>
        </select>
        <br> 縣/區(qū)：
        <select id='myDistrict'>
            <option>-請(qǐng)選擇縣/區(qū)-</option>
            <option v-for='district in districtList' v-bind:value='district.id'>{{district.name}}</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: []
        }
    })

    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)



                    //     }

                    // })
                }

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

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容