三级联动

一个简单的三级联动

<div class="selectList">
        <select class="province">
            <option>请选择</option>
        </select>
        <select class="city">
            <option>请选择</option>
        </select>
        <select class="district">
            <option>请选择</option>
        </select>
    </div>
    <div class="selectList">
        <select class="province">
            <option>请选择</option>
        </select>
        <select class="city">
            <option>请选择</option>
        </select>
        <select class="district">
            <option>请选择</option>
        </select>
    </div>

    $(function () {
        var json=[
            {"p":"江西省",
                "c":[
                    {"ct":"南昌市",
                        "d":[
                            {"dt":"西湖区"},
                            {"dt":"东湖区"},
                            {"dt":"高新区"}
                        ]},
                    {"ct":"赣州市",
                        "d":[
                            {"dt":"瑞金县"},
                            {"dt":"南丰县"},
                            {"dt":"全南县"}
                        ]}
                ]},
            {"p":"北京",
                "c":[
                    {"ct":"东城区"},
                    {"ct":"西城区"}
                ]},
            {"p":"河北省",
                "c":[
                    {"ct":"石家庄",
                        "d":[
                            {"dt":"长安区"},
                            {"dt":"桥东区"},
                            {"dt":"桥西区"}
                        ]},
                    {"ct":"唐山市",
                        "d":[
                            {"dt":"滦南县"},
                            {"dt":"乐亭县"},
                            {"dt":"迁西县"}
                        ]}
                ]}
        ];
            $(".selectList").each(function () {
                var url = "area.json";
                var areaJson;
                var temp_html;
                var oProvince = $(this).find(".province");
                var oCity = $(this).find(".city");
                var oDistrict = $(this).find(".district");
                //初始化省
                var province = function () {
                    $.each(areaJson, function (i, province) {
                        temp_html += '<option value='+province.p+'>'+province.p +'</option>';
                    });
                    oProvince.html(temp_html);
                    city();
                };
                //赋值市
                var city = function () {
                    temp_html = "";
                    var n = oProvince.get(0).selectedIndex;
                    $.each(areaJson[n].c, function (i, city) {
                        temp_html += "<option value='" + city.ct + "'>" + city.ct + "</option>";
                    });
                    oCity.html(temp_html);
                    district();
                };
                //赋值县
                var district = function () {
                    temp_html = "";
                    var m = oProvince.get(0).selectedIndex;
                    var n = oCity.get(0).selectedIndex;
                    if (typeof(areaJson[m].c[n].d) == "undefined") {
                        oDistrict.css("display", "none");
                    } else {
                        oDistrict.css("display", "inline");
                        $.each(areaJson[m].c[n].d, function (i, district) {
                            temp_html += "<option value='" + district.dt + "'>" + district.dt + "</option>";
                        });
                        oDistrict.html(temp_html);
                    }
                    ;
                };
                //选择省改变市
                oProvince.change(function () {
                    city();
                });
                //选择市改变县
                oCity.change(function () {
                    district();
                });
                //获取json数据
                $.getJSON(url, function (data) {
                    areaJson = data;
                    province();
                });
            });
        });