<!-- 省 -->
    <select name="province" id="province"> </select>
    <!-- 市 -->
    <select name="city" id="city"> </select>
    <!-- 縣 -->
    <select name="county" id="county"> </select>

// 數(shù)據(jù)通常由后臺(tái)返回任内，結(jié)構(gòu)如下：

var citys = [

        { "name": "北京", "city": [{ "name": "北京", "area": ["東城區(qū)", "西城區(qū)", "崇文區(qū)", "宣武區(qū)", "朝陽(yáng)區(qū)", "豐臺(tái)區(qū)", "石景山區(qū)", "海淀區(qū)", "門頭溝區(qū)", "房山區(qū)", "通州區(qū)", "順義區(qū)", "昌平區(qū)", "大興區(qū)", "平谷區(qū)", "懷柔區(qū)", "密云縣", "延慶縣"] }] },
        { "name": "天津", "city": [{ "name": "天津", "area": ["和平區(qū)", "河?xùn)|區(qū)", "河西區(qū)", "南開(kāi)區(qū)", "河北區(qū)", "紅橋區(qū)", "塘沽區(qū)", "漢沽區(qū)", "大港區(qū)", "東麗區(qū)", "西青區(qū)", "津南區(qū)", "北辰區(qū)", "武清區(qū)", "寶坻區(qū)", "寧河縣", "靜海縣", "薊 縣"] }] }
    ]

    // 具體實(shí)現(xiàn)

    // 獲取省
    var province = document.getElementById('province');

    province.options[0] = new Option('請(qǐng)選擇省', -1)

    // 獲取市
    var city = document.getElementById('city');
    city.options[0] = new Option('請(qǐng)選擇市', -1)
    // 獲取縣
    var county = document.getElementById('county');
    county.options[0] = new Option('請(qǐng)選擇縣', -1)

    citys.forEach(function (item, index) {

        // 添加省
        province.options[province.options.length] = new Option(item.name, index);

        // 給省綁定事件
        province.onchange = function () {

            // 獲取選擇的省
            var provinceValue = province.value;

            // 首先清空市和區(qū)縣
            city.options.length = 0;
            city.options[city.options.length] = new Option('請(qǐng)選擇市', -1);
            county.options.length = 0;
            county.options[county.options.length] = new Option('請(qǐng)選擇縣', -1)

            // 判斷是否是‘請(qǐng)選擇’
            if (province.value !== '-1') {

                // 然后給對(duì)應(yīng)的省添加市
                citys[provinceValue].city.forEach(function (item, index) {
                    city.options[city.options.length] = new Option(item.name, index);

                    // 給市綁定事件
                    city.onchange = function () {

                        // 獲取選擇的市
                        var cityValue = city.value;

                        // 清空縣
                        county.options.length = 0;
                        county.options[county.options.length] = new Option('請(qǐng)選擇縣', -1);

                        // 判斷選擇的市是否是‘請(qǐng)選擇’
                        if (cityValue !== '-1') {

                            // 設(shè)置市對(duì)應(yīng)的縣
                            citys[provinceValue].city[cityValue].area.forEach(function (item, index) {
                                county.options[county.options.length] = new Option(item, index);
                            })
                        }
                    }
                })
            }
        }
    })