Jquery实现省市县三级联动

<select name="sltPro" id="sltPro"></select>
<select name="sltCity" id="sltCity"></select>

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

<script type="text/javascript">

var data = $.parseJSON('{"id":"13","name":"河北省","childs":[{"id":"1301","name":"石家庄市","childs":[{"id":"130102","name":"长安


区","childs":null},{"id":"130104","name":"桥西区","childs":null},{"id":"130105","name":"新华区","childs":null},


{"id":"130107","name":"井陉矿区","childs":null},{"id":"130108","name":"裕华区","childs":null},{"id":"130109","name":"藁


城区","childs":null},{"id":"130110","name":"鹿泉区","childs":null},{"id":"130111","name":"    栾城区","childs":null},


{"id":"130121","name":"井陉县","childs":null},{"id":"130123","name":"正定县","childs":null},{"id":"130125","name":"行唐


县","childs":null},{"id":"130126","name":"灵寿县","childs":null},{"id":"130127","name":"高邑县","childs":null},


{"id":"130128","name":"深泽县","childs":null},{"id":"130129","name":"赞皇县","childs":null},{"id":"130130","name":"无极


县","childs":null},{"id":"130131","name":"平山县","childs":null},{"id":"130132","name":"元氏县","childs":null},


{"id":"130133","name":"赵县","childs":null},{"id":"130181","name":"    辛集市","childs":null},{"id":"130183","name":"晋


州市","childs":null},{"id":"130184","name":"新乐市","childs":null}]},{"id":"1302","name":"唐山市","childs":


[{"id":"130202","name":"路南区","childs":null},{"id":"130203","name":"路北区","childs":null},{"id":"130204","name":"古冶


区","childs":null},{"id":"130205","name":"开平区","childs":null},{"id":"130207","name":"丰南区","childs":null},


{"id":"130208","name":"丰润区","childs":null},{"id":"130209","name":"曹妃甸区","childs":null},{"id":"130223","name":"滦


县","childs":null},{"id":"130224","name":"滦南县","childs":null},{"id":"130225","name":"乐亭县","childs":null},


{"id":"130227","name":"迁西县","childs":null},{"id":"130229","name":"玉田县","childs":null},{"id":"130281","name":"遵化


市","childs":null},{"id":"130283","name":"迁安市","childs":null}]},{"id":"1303","name":"秦皇岛市","childs":


[{"id":"130302","name":"海港区","childs":null},{"id":"130303","name":"山海关区","childs":null},{"id":"130304","name":"北


戴河区","childs":null},{"id":"130321","name":"青龙满族自治县","childs":null},{"id":"130322","name":"昌黎


县","childs":null},{"id":"130323","name":"抚宁县","childs":null},{"id":"130324","name":"卢龙县","childs":null}]},


{"id":"1304","name":"邯郸市","childs":[{"id":"130402","name":"邯山区","childs":null},{"id":"130403","name":"丛台


区","childs":null},{"id":"130404","name":"复兴区","childs":null},{"id":"130406","name":"峰峰矿区","childs":null},


{"id":"130421","name":"邯郸县","childs":null},{"id":"130423","name":"临漳县","childs":null},{"id":"130424","name":"成安


县","childs":null},{"id":"130425","name":"大名县","childs":null},{"id":"130426","name":"涉县","childs":null},


{"id":"130427","name":"磁县","childs":null},{"id":"130428","name":"肥乡县","childs":null},{"id":"130429","name":"永年


县","childs":null},{"id":"130430","name":"邱县","childs":null},{"id":"130431","name":"鸡泽县","childs":null},


{"id":"130432","name":"广平县","childs":null},{"id":"130433","name":"馆陶县","childs":null},{"id":"130434","name":"魏


县","childs":null},{"id":"130435","name":"曲周县","childs":null},{"id":"130481","name":"武安市","childs":null}]},


{"id":"1305","name":"邢台市","childs":[{"id":"130502","name":"桥东区","childs":null},{"id":"130503","name":"桥西


区","childs":null},{"id":"130521","name":"邢台县","childs":null},{"id":"130522","name":"临城县","childs":null},


{"id":"130523","name":"内丘县","childs":null},{"id":"130524","name":"柏乡县","childs":null},{"id":"130525","name":"隆尧


县","childs":null},{"id":"130526","name":"任县","childs":null},{"id":"130527","name":"南和县","childs":null},


{"id":"130528","name":"宁晋县","childs":null},{"id":"130529","name":"巨鹿县","childs":null},{"id":"130530","name":"新河


县","childs":null},{"id":"130531","name":"广宗县","childs":null},{"id":"130532","name":"平乡县","childs":null},


{"id":"130533","name":"威县","childs":null},{"id":"130534","name":"清河县","childs":null},{"id":"130535","name":"临西


县","childs":null},{"id":"130581","name":"南宫市","childs":null},{"id":"130582","name":"沙河市","childs":null}]},


{"id":"1306","name":"保定市","childs":[{"id":"130602","name":"竞秀区","childs":null},{"id":"130603","name":"莲池


区","childs":null},{"id":"130621","name":"满城区","childs":null},{"id":"130622","name":"清苑区","childs":null},


{"id":"130623","name":"涞水县","childs":null},{"id":"130624","name":"阜平县","childs":null},{"id":"130625","name":"徐水


区","childs":null},{"id":"130626","name":"定兴县","childs":null},{"id":"130627","name":"唐县","childs":null},


{"id":"130628","name":"高阳县","childs":null},{"id":"130629","name":"容城县","childs":null},{"id":"130630","name":"涞源


县","childs":null},{"id":"130631","name":"望都县","childs":null},{"id":"130632","name":"安新县","childs":null},


{"id":"130633","name":"易县","childs":null},{"id":"130634","name":"曲阳县","childs":null},{"id":"130635","name":"蠡


县","childs":null},{"id":"130636","name":"顺平县","childs":null},{"id":"130637","name":"博野县","childs":null},


{"id":"130638","name":"雄县","childs":null},{"id":"130681","name":"涿州市","childs":null},{"id":"130682","name":"    定


州市","childs":null},{"id":"130683","name":"安国市","childs":null},{"id":"130684","name":"高碑店市","childs":null}]},


{"id":"1307","name":"张家口市","childs":[{"id":"130702","name":"桥东区","childs":null},{"id":"130703","name":"桥西


区","childs":null},{"id":"130705","name":"宣化区","childs":null},{"id":"130706","name":"下花园区","childs":null},


{"id":"130721","name":"宣化县","childs":null},{"id":"130722","name":"张北县","childs":null},{"id":"130723","name":"康保


县","childs":null},{"id":"130724","name":"沽源县","childs":null},{"id":"130725","name":"尚义县","childs":null},


{"id":"130726","name":"蔚县","childs":null},{"id":"130727","name":"阳原县","childs":null},{"id":"130728","name":"怀安


县","childs":null},{"id":"130729","name":"万全县","childs":null},{"id":"130730","name":"怀来县","childs":null},


{"id":"130731","name":"涿鹿县","childs":null},{"id":"130732","name":"赤城县","childs":null},{"id":"130733","name":"崇礼


县","childs":null}]},{"id":"1308","name":"承德市","childs":[{"id":"130802","name":"双桥区","childs":null},


{"id":"130803","name":"双滦区","childs":null},{"id":"130804","name":"鹰手营子矿区","childs":null},


{"id":"130821","name":"承德县","childs":null},{"id":"130822","name":"兴隆县","childs":null},{"id":"130823","name":"平泉


县","childs":null},{"id":"130824","name":"滦平县","childs":null},{"id":"130825","name":"隆化县","childs":null},


{"id":"130826","name":"丰宁满族自治县","childs":null},{"id":"130827","name":"宽城满族自治县","childs":null},


{"id":"130828","name":"围场满族蒙古族自治县","childs":null}]},{"id":"1309","name":"沧州市","childs":


[{"id":"130902","name":"新华区","childs":null},{"id":"130903","name":"运河区","childs":null},{"id":"130921","name":"沧县


","childs":null},{"id":"130922","name":"青县","childs":null},{"id":"130923","name":"东光县","childs":null},


{"id":"130924","name":"海兴县","childs":null},{"id":"130925","name":"盐山县","childs":null},{"id":"130926","name":"肃宁


县","childs":null},{"id":"130927","name":"南皮县","childs":null},{"id":"130928","name":"吴桥县","childs":null},


{"id":"130929","name":"献县","childs":null},{"id":"130930","name":"孟村回族自治县","childs":null},


{"id":"130981","name":"泊头市","childs":null},{"id":"130982","name":"任丘市","childs":null},{"id":"130983","name":"黄骅


市","childs":null},{"id":"130984","name":"河间市","childs":null}]},{"id":"1310","name":"廊坊市","childs":


[{"id":"131002","name":"安次区","childs":null},{"id":"131003","name":"广阳区","childs":null},{"id":"131022","name":"固安


县","childs":null},{"id":"131023","name":"永清县","childs":null},{"id":"131024","name":"香河县","childs":null},


{"id":"131025","name":"大城县","childs":null},{"id":"131026","name":"文安县","childs":null},{"id":"131028","name":"大厂


回族自治县","childs":null},{"id":"131081","name":"霸州市","childs":null},{"id":"131082","name":"三河


市","childs":null}]},{"id":"1311","name":"衡水市","childs":[{"id":"131102","name":"桃城区","childs":null},


{"id":"131121","name":"枣强县","childs":null},{"id":"131122","name":"武邑县","childs":null},{"id":"131123","name":"武强


县","childs":null},{"id":"131124","name":"饶阳县","childs":null},{"id":"131125","name":"安平县","childs":null},


{"id":"131126","name":"故城县","childs":null},{"id":"131127","name":"景县","childs":null},{"id":"131128","name":"阜城


县","childs":null},{"id":"131181","name":"冀州市","childs":null},{"id":"131182","name":"深州市","childs":null}]}]}');

function MultiLinkage(options) {
    $.extend(this, options || {});


    function bindSelector1() {
        var slt = $(selector1);
        slt.append("<option value=''>请选择</option>");
        for (var i = 0; i < data.length; i++) {
            var selected = "";
            if (selectedValue.startWith(data[i].id)) {
                selected = "selected='true'";
            }
            slt.append("<option value='" + data[i].id + "'" + selected + ">" + data[i].name + "</option>");
        }
        if (selectedValue) {
            bindSelector2();
            slt.change(bindSelector2);
        }
    }


    function bindSelector2() {
        var p1 = $(selector1);
        var selectedValue1 = p1.find("option:selected").val();
        var slt = $(selector2);
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == selectedValue1) {
                var childs = data[i].childs;
                if (childs) {
                    slt.empty();
                    for (var j = 0; j < childs.length; j++) {
                        var selected = "";
                        if (selectedValue.startWith(childs[j].id)) {
                            selected = "selected='true'";
                        }
                        slt.append("<option value='" + childs[j].id + "'" + selected + ">" + childs[j].name + "</option>");
                    }
                }
            }
        }
        bindSelector3();
        slt.change(bindSelector3);
    }


    function bindSelector3() {
        var p1 = $(selector1);
        var selectedValue1 = p1.find("option:selected").val();
        var p2 = $(selector2);
        var selectedValue2 = p2.find("option:selected").val();
        var slt = $(selector3);
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == selectedValue1) {
                var childs1 = data[i].childs;
                if (childs1) {
                    for (var i2 = 0; i2 < childs1.length; i2++) {
                        if (childs1[i2].id == selectedValue2) {
                            var childs = childs1[i2].childs;
                            if (childs) {
                                slt.empty();
                                for (var j = 0; j < childs.length; j++) {
                                    var selected = "";
                                    if (selectedValue == childs[j].id) {
                                        selected = "selected='true'";
                                    }
                                    slt.append("<option value='" + childs[j].id + "'" + selected + ">" + childs[j].name + "</option>");
                                }
                            }
                        }
                    }
                }
            }
        }
    }


    if (this.selector1) {
        bindSelector1();
    } else if (this.selector2) {
        bindSelector2();
    } else if (this.selector3) {
        bindSelector3();
    }
}


MultiLinkage.prototype = {
    selector1: null,
    selector2: null,
    selector3: null,
    data: null,
    selectedValue: ""
};
MultiLinkage({
                            selector1: "#sltPro",
                            selector2: "#sltCity",
                            selector3: "#sltCounty",
                            data: data,
                            selectedValue: "130602"

})

</script>