先寫上html代碼

<div id="app">
    <select name="province" id="province">

    </select>
    <select name="city" id="city">

    </select>
</div>

準(zhǔn)備好省份城市的數(shù)據(jù)

citiesInfo: {
    '北京': ['北京'],
    '上海': ['上海'],
    '天津': ['天津'],
    '重慶': ['重慶'],
    '河北省': ['石家莊', '張家口', '承德', '秦皇島', '唐山', '廊坊', '保定', '滄州', '衡水', '邢臺', '邯鄲'],
    '山西省': ['太原', '大同', '朔州', '陽泉', '長治', '晉城', '忻州', '呂梁', '晉中', '臨汾', '運(yùn)城'],
    '遼寧省': ['沈陽', '朝陽', '阜新', '鐵嶺', '撫順', '本溪', '遼陽', '鞍山', '丹東', '大連', '營口', '盤錦', '錦州', '葫蘆島'],
    '吉林省': ['長春', '白城', '松原', '吉林', '四平', '遼源', '通化', '白山', '延邊'],
    '黑龍江省': ['哈爾濱', '齊齊哈爾', '黑河', '大慶', '伊春', '鶴崗', '佳木斯', '雙鴨山', '七臺河', '雞西', '牡丹江', '綏化', '大興安'],
    '江蘇省': ['南京', '徐州', '連云港', '宿遷', '淮陰', '鹽城', '揚(yáng)州', '泰州', '南通', '鎮(zhèn)江', '常州', '無錫', '蘇州'],
    '浙江省': ['杭州', '湖州', '嘉興', '舟山', '寧波', '紹興', '金華', '臺州', '溫州', '麗水'],
    '安徽省': ['合肥', '宿州', '淮北', '阜陽', '蚌埠', '淮南', '滁州', '馬鞍山', '蕪湖', '銅陵', '安慶', '黃山', '六安', '巢湖', '池州', '宣城'],
    '福建省': ['福州', '南平', '三明', '莆田', '泉州', '廈門', '漳州', '龍巖', '寧德'],
    '江西省': ['南昌', '九江', '景德鎮(zhèn)', '鷹潭', '新余', '萍鄉(xiāng)', '贛州', '上饒', '撫州', '宜春', '吉安'],
    '山東省': ['濟(jì)南', '聊城', '德州', '東營', '淄博', '濰坊', '煙臺', '威海', '青島', '日照', '臨沂', '棗莊', '濟(jì)寧', '泰安', '萊蕪', '濱州', '菏澤'],
    '河南省': ['鄭州', '三門峽', '洛陽', '焦作', '新鄉(xiāng)', '鶴壁', '安陽', '濮陽', '開封', '商丘', '許昌', '漯河', '平頂山', '南陽', '信陽', '周口', '駐馬店'],
    '湖北省': ['武漢', '十堰', '襄攀', '荊門', '孝感', '黃岡', '鄂州', '黃石', '咸寧', '荊州', '宜昌', '恩施', '襄樊'],
    '湖南省': ['長沙', '張家界', '常德', '益陽', '岳陽', '株洲', '湘潭', '衡陽', '郴州', '永州', '邵陽', '懷化', '婁底', '湘西'],
    '廣東省': ['廣州', '清遠(yuǎn)', '韶關(guān)', '河源', '梅州', '潮州', '汕頭', '揭陽', '汕尾', '惠州', '東莞', '深圳', '珠海', '江門', '佛山', '肇慶', '云浮', '陽江', '茂名', '湛江'],
    '海南省': ['海口', '三亞'],
    '四川省': ['成都', '廣元', '綿陽', '德陽', '南充', '廣安', '遂寧', '內(nèi)江', '樂山', '自貢', '瀘州', '宜賓', '攀枝花', '巴中', '達(dá)川', '資陽', '眉山', '雅安', '阿壩', '甘孜', '涼山'],
    '貴州省': ['貴陽', '六盤水', '遵義', '畢節(jié)', '銅仁', '安順', '黔東南', '黔南', '黔西南'],
    '云南省': ['昆明', '曲靖', '玉溪', '麗江', '昭通', '思茅', '臨滄', '保山', '德宏', '怒江', '迪慶', '大理', '楚雄', '紅河', '文山', '西雙版納'],
    '陜西省': ['西安', '延安', '銅川', '渭南', '咸陽', '寶雞', '漢中', '榆林', '商洛', '安康'],
    '甘肅省': ['蘭州', '嘉峪關(guān)', '金昌', '白銀', '天水', '酒泉', '張掖', '武威', '慶陽', '平?jīng)?, '定西', '隴南', '臨夏', '甘南'],
    '青海省': ['西寧', '海東', '西寧', '海北', '海南', '黃南', '果洛', '玉樹', '海西'],
    '內(nèi)蒙古': ['呼和浩特', '包頭', '烏海', '赤峰', '呼倫貝爾盟', '興安盟', '哲里木盟', '錫林郭勒盟', '烏蘭察布盟', '鄂爾多斯', '巴彥淖爾盟', '阿拉善盟'],
    '廣西': ['南寧', '桂林', '柳州', '梧州', '貴港', '玉林', '欽州', '北海', '防城港', '南寧', '百色', '河池', '柳州', '賀州'],
    '西藏': ['拉薩', '那曲', '昌都', '林芝', '山南', '日喀則', '阿里'],
    '寧夏': ['銀川', '石嘴山', '吳忠', '固原'],
    '新疆': ['烏魯木齊', '克拉瑪依', '喀什', '阿克蘇', '和田', '吐魯番', '哈密', '博爾塔拉', '昌吉', '巴音郭楞', '伊犁', '塔城', '阿勒泰'],
    '香港': ['香港'],
    '澳門': ['澳門'],
    '臺灣': ['臺北', '臺南', '其他']
}

然后開始編寫js代碼

加入初始化方法攘轩。這個初始化方法相當(dāng)于主干姻成，明白每一步該干嘛，然后在去把需要用到的方法寫好就行

init: function() {
  this.renderPro(); //渲染省份列表
  var _province = $('#province').val();  //獲取當(dāng)前省份
  this.renderCity(_province);  //根據(jù)當(dāng)前省份渲染城市列表
  var _this = this;  //緩存this
  //當(dāng)省份變化時重新渲染城市列表
  $('#province').change(function() {
      var _province = $('#province').val();
      _this.renderCity(_province);
  });
}

獲取省份信息

getPro: function() {
    var pro = [];
    for(let item in this.list.citiesInfo) {
        pro.push(item);
    }
    return pro;
}

把省份信息渲染到頁面

renderPro: function() {
    var province = this.getPro();  //調(diào)用上面寫好的getPro方法，getPro方法返回的是一個存儲省份信息的數(shù)組
    var html = ""; 
    //遍歷數(shù)組吵冒，
    for(var i = 0, length = province.length; i < length; i++) {
        html += '<option>' + province[i] + '</option>';
    }  
    //將省份信息渲染到模版
    $('#province').html(html);
}

根據(jù)省份去獲取該省份的城市信息

renderCity: function(_province) {
    var _city = this.getCity(_province);  //調(diào)用getCity方法，改方法返回城市信息
    var html = "";
    //一樣的西剥，遍歷數(shù)組
    for(var i = 0, length = _city.length; i < length; i++) {
        html += '<option>' + _city[i] + '</option>';
    }
    //然后渲染到頁面上
    $('#city').html(html);
}

獲取城市信息的方法

getCity: function(pro) {  //記得傳參
    var city = this.list.citiesInfo[pro];
    return city;
}

這樣所需要的方法就寫好了

然后在頁面渲染的時候調(diào)用init() 這個初始化方法就好

附上完整代碼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="app">
            <select name="province" id="province">

            </select>
            <select name="city" id="city">

            </select>
        </div>
        <script type="text/javascript">
            var demo = {
                list: {
                    citiesInfo: {
                        '北京': ['北京'],
                        '上海': ['上海'],
                        '天津': ['天津'],
                        '重慶': ['重慶'],
                        '河北省': ['石家莊', '張家口', '承德', '秦皇島', '唐山', '廊坊', '保定', '滄州', '衡水', '邢臺', '邯鄲'],
                        '山西省': ['太原', '大同', '朔州', '陽泉', '長治', '晉城', '忻州', '呂梁', '晉中', '臨汾', '運(yùn)城'],
                        '遼寧省': ['沈陽', '朝陽', '阜新', '鐵嶺', '撫順', '本溪', '遼陽', '鞍山', '丹東', '大連', '營口', '盤錦', '錦州', '葫蘆島'],
                        '吉林省': ['長春', '白城', '松原', '吉林', '四平', '遼源', '通化', '白山', '延邊'],
                        '黑龍江省': ['哈爾濱', '齊齊哈爾', '黑河', '大慶', '伊春', '鶴崗', '佳木斯', '雙鴨山', '七臺河', '雞西', '牡丹江', '綏化', '大興安'],
                        '江蘇省': ['南京', '徐州', '連云港', '宿遷', '淮陰', '鹽城', '揚(yáng)州', '泰州', '南通', '鎮(zhèn)江', '常州', '無錫', '蘇州'],
                        '浙江省': ['杭州', '湖州', '嘉興', '舟山', '寧波', '紹興', '金華', '臺州', '溫州', '麗水'],
                        '安徽省': ['合肥', '宿州', '淮北', '阜陽', '蚌埠', '淮南', '滁州', '馬鞍山', '蕪湖', '銅陵', '安慶', '黃山', '六安', '巢湖', '池州', '宣城'],
                        '福建省': ['福州', '南平', '三明', '莆田', '泉州', '廈門', '漳州', '龍巖', '寧德'],
                        '江西省': ['南昌', '九江', '景德鎮(zhèn)', '鷹潭', '新余', '萍鄉(xiāng)', '贛州', '上饒', '撫州', '宜春', '吉安'],
                        '山東省': ['濟(jì)南', '聊城', '德州', '東營', '淄博', '濰坊', '煙臺', '威海', '青島', '日照', '臨沂', '棗莊', '濟(jì)寧', '泰安', '萊蕪', '濱州', '菏澤'],
                        '河南省': ['鄭州', '三門峽', '洛陽', '焦作', '新鄉(xiāng)', '鶴壁', '安陽', '濮陽', '開封', '商丘', '許昌', '漯河', '平頂山', '南陽', '信陽', '周口', '駐馬店'],
                        '湖北省': ['武漢', '十堰', '襄攀', '荊門', '孝感', '黃岡', '鄂州', '黃石', '咸寧', '荊州', '宜昌', '恩施', '襄樊'],
                        '湖南省': ['長沙', '張家界', '常德', '益陽', '岳陽', '株洲', '湘潭', '衡陽', '郴州', '永州', '邵陽', '懷化', '婁底', '湘西'],
                        '廣東省': ['廣州', '清遠(yuǎn)', '韶關(guān)', '河源', '梅州', '潮州', '汕頭', '揭陽', '汕尾', '惠州', '東莞', '深圳', '珠海', '江門', '佛山', '肇慶', '云浮', '陽江', '茂名', '湛江'],
                        '海南省': ['罕云埽口', '三亞'],
                        '四川省': ['成都', '廣元', '綿陽', '德陽', '南充', '廣安', '遂寧', '內(nèi)江', '樂山', '自貢', '瀘州', '宜賓', '攀枝花', '巴中', '達(dá)川', '資陽', '眉山', '雅安', '阿壩', '甘孜', '涼山'],
                        '貴州省': ['貴陽', '六盤水', '遵義', '畢節(jié)', '銅仁', '安順', '黔東南', '黔南', '黔西南'],
                        '云南省': ['昆明', '曲靖', '玉溪', '麗江', '昭通', '思茅', '臨滄', '保山', '德宏', '怒江', '迪慶', '大理', '楚雄', '紅河', '文山', '西雙版納'],
                        '陜西省': ['西安', '延安', '銅川', '渭南', '咸陽', '寶雞', '漢中', '榆林', '商洛', '安康'],
                        '甘肅省': ['蘭州', '嘉峪關(guān)', '金昌', '白銀', '天水', '酒泉', '張掖', '武威', '慶陽', '平?jīng)?, '定西', '隴南', '臨夏', '甘南'],
                        '青海省': ['西寧', '海東', '西寧', '海北', '海南', '黃南', '果洛', '玉樹', '海西'],
                        '內(nèi)蒙古': ['呼和浩特', '包頭', '烏海', '赤峰', '呼倫貝爾盟', '興安盟', '哲里木盟', '錫林郭勒盟', '烏蘭察布盟', '鄂爾多斯', '巴彥淖爾盟', '阿拉善盟'],
                        '廣西': ['南寧', '桂林', '柳州', '梧州', '貴港', '玉林', '欽州', '北海', '防城港', '南寧', '百色', '河池', '柳州', '賀州'],
                        '西藏': ['拉薩', '那曲', '昌都', '林芝', '山南', '日喀則', '阿里'],
                        '寧夏': ['銀川', '石嘴山', '吳忠', '固原'],
                        '新疆': ['烏魯木齊', '克拉瑪依', '喀什', '阿克蘇', '和田', '吐魯番', '哈密', '博爾塔拉', '昌吉', '巴音郭楞', '伊犁', '塔城', '阿勒泰'],
                        '香港': ['香港'],
                        '澳門': ['澳門'],
                        '臺灣': ['臺北', '臺南', '其他']
                    }
                },
                init: function() {
                    this.renderPro();
                    var _province = $('#province').val();
                    this.renderCity(_province);
                    var _this = this;
                    $('#province').change(function() {
                        var _province = $('#province').val();
                        _this.renderCity(_province);
                    });
                },
                renderPro: function() {
                    var province = this.getPro();
                    var html = "";
                    for(var i = 0, length = province.length; i < length; i++) {
                        html += '<option>' + province[i] + '</option>';
                    }
                    $('#province').html(html);
                },
                renderCity: function(_province) {
                    var _city = this.getCity(_province);
                    var html = "";
                    for(var i = 0, length = _city.length; i < length; i++) {
                        html += '<option>' + _city[i] + '</option>';
                    }
                    $('#city').html(html);
                },
                getCity: function(pro) {
                    var city = this.list.citiesInfo[pro];
                    return city;
                },
                getPro: function() {
                    var pro = [];
                    for(let item in this.list.citiesInfo) {
                        pro.push(item);
                    }
                    return pro;
                }

            }
            $(function() {
                demo.init();
            })
        </script>
    </body>

</html>

記得調(diào)用初始化方法！記得調(diào)用初始化方法瞭空！記得調(diào)用初始化方法揪阿！

$(function() { 
    demo.init()
})

覺得有用的話點(diǎn)個喜歡吧~~~嘿嘿嘿

附帶截圖

選擇省份

選擇城市