jQuery 实现简单的省市区三级联动

html

<select name="" class="prove"></select>
<select name="" class="city"></select>
<select name="" class="county" value="122"></select>

javascript

$(function() {
    var pros = ["河南省", "浙江省", "江苏省", "湖北省"]
    var citys = [
        ["郑州市", "开封市", "信阳市"],
        ["宁波市", "杭州市"],
        ["苏州市", "盐城市", "连云港市"],
        ["武汉市", "黄冈市"]
    ]
    var big = [
        zhengzhou = [
            ['中原区', '二七区', '金水区', '惠济区', '管城区', '上街区和荥阳市', '巩义市', '登封市', '新密市', '新郑市', '中牟县'],
            ['开封县', '杞县', '通许县', '兰考县', '尉氏县'],
            ['?河区', '平桥区', '潢川县', '淮滨县', '息县', '新县', '商城县', '固始县', '罗山县', '光山县']
        ],
        zhejiang = [
            ['海曙', '江东', '江北', '鄞州', '镇海', '北仑'],
            ['上城区', '下城区', '西湖区', '江干区', '拱墅区', '滨江区', '萧山区', '余杭区', '临安区', '富阳区']
        ],
        jiangsu = [
            ['常熟市', '张家港市', '太仓市', '昆山市', '吴江市', '苏州'],
            ['建湖', '射阳', '阜宁', '滨海', '响水'],
            ['海州区', '连云区', '赣榆区', '灌南县', '东海县', '灌云县']
        ],
        hubei = [
            ['辖江岸', '江汉', '楚口', '汉阳', '武昌', '青山', '洪山', '蔡甸', '江夏', '黄陂', '新洲', '东西湖', '汉南'],
            ['团风县', '浠水县', '罗田县', '英山县', '蕲春县', '黄梅县', '红安县']
        ]
    ]
    //遍历省份并添加到菜单中
    pros.forEach(function(item) {
        $("<option></option>")
            .text(item)
            .appendTo(".prove")
    })
    //遍历默认城市并添加到菜单中
    citys[0].forEach(addcity);
    //遍历默认县并添加到菜单中
    zhengzhou[0].forEach(addcounty)
    //给省添加改变事件
    $(".prove").change(function() {
        var $index1 = $(this).find(":selected").index();
        window.$index1 = $index1;
        //清空城市列表以便再次添加
        $(".city").empty();
        $(".county").empty();
        $("<option></option>").text("请选择城市").appendTo(".county")
        citys[$index1].forEach(addcity);
    })
    //添加城市
    function addcity(item) {
        $("<option></option>")
            .text(item)
            .appendTo(".city")
    }
    //添加县区
    function addcounty(item) {
        $("<option></option>")
            .text(item)
            .appendTo(".county")
    }
    //给市添加改变事件
    $(".city").change(function() {
        var $index = $(this).find(":selected").index();
        $(".county").empty();
        big[$index1][$index].forEach(addcounty)
    })
})