省市区城市级联

约定
- 省市区三级城市联动效果，选择框默认全部显示，选择后根据实际情况显示或隐藏。
- 在省得select上加上属性 load-data=“330102” 即表示页面需把330102这个对应的相关select做相应选中。
- json数据结构：城市编码6位（每2位表示一级），城市层级，上一级编码，城市名称，其他根据业务实际需求而定
效果https://github.com/Pamki/blog/blob/master/web-dom/city/city.html

DOM结构：

<form class="form-horizontal col-xs-6">
            <div class="form-group" id="addrs">
                <label for="" class="col-sm-3 text-right">地址</label>
                <div class="col-sm-3">
                    <select id="province" class="addr form-control" load-data="210104">
                        <option value="">--选择省/市--</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <select id="city" class="form-control">
                        <option value="">--选择城市--</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <select id="district" class="form-control">
                        <option value="">--选择区域--</option>
                    </select>
                </div>
            </div>
            <font>CODE:</font><input class="show" type="text" name="address" id="address" />
        </form>

js：

$(function() {
    var prov_obj = $("#province");
    var city_obj = $("#city");
    var district_obj = $("#district");
    var are_obj = $("#address");
    var city = document.getElementById('city');
    var district = document.getElementById('district');
    var select_prehtml = "";
    var getcity;

    var setCity = function() {
        //只要触发了此事件，2、3级菜单必须还原               
        city.options.length = 1; //重置选项
        district.options.length = 1; //重置选项
        var val = prov_obj.val();

        temp_html = select_prehtml;
        var getjson = $.each(getcity, function(i, prov) {
            if(prov.level == 2 && prov.parent_code == val) {
                temp_html += "<option name=\"" + prov.abbr + "\" value=\"" + prov.code + "\">" + prov.name + "</option>";
            }
        });
        $.when(getjson).done(function(data) {
            city_obj.append(temp_html);
            getdist("one");
        });

    }; //设置城市

    var setArea = function() {
        //只要触发了此事件，3级菜单必须还原             
        district.options.length = 1; //重置选项
        var val = city_obj.val();

        temp_html = select_prehtml;
        var getjson = $.each(getcity, function(i, prov) {
            if(prov.level == 3 && prov.parent_code == val) {
                temp_html += "<option name=\"" + prov.abbr + "\" value=\"" + prov.code + "\">" + prov.name + "</option>";
            }

        });
        $.when(getjson).done(function(data) {
            district_obj.append(temp_html);
            //          if(district.options.length < 2) {
            //              district_obj.hide();
            //          } else {
            //              district_obj.show();
            //          }
            getdist("two");
        });
    }; //设置区域

    var getdist = function(sign) {
        var s1 = prov_obj.val();
        var s2 = city_obj.val();
        var s3 = district_obj.val();
        if(sign == "one") {
            are_obj.val(s1);
            prov_obj.attr("load-data", s1);
        } else if(sign == "two") {
            are_obj.val(s2);
            prov_obj.attr("load-data", s2);
        } else {
            are_obj.val(s3);
            prov_obj.attr("load-data", s3);
        }

        if(s2 == "") {
            are_obj.val(s1);
            prov_obj.attr("load-data", s1);
        }
        if(s3 == "" && s2 !== "") {
            are_obj.val(s2);
            prov_obj.attr("load-data", s2);
        }

    }; //获取城市编码

    var load_city = function() {
        if($("select.addr").attr("load-data") != "") {
            var ldata = $("select.addr").attr("load-data");
            are_obj.val(ldata);
            var temp_html, temp_html2, temp_html3 = select_prehtml;

            for(var i = 0; i < getcity.length; i++) {
                if(getcity[i].code == ldata) {
                    var s1 = ldata.substr(0, 2) + "0000"; //1级
                    var s2 = ldata.substr(0, 4) + "00"; //2级
                    prov_obj.val(s1); //获取1级城市目录并赋值                 

                    for(var j = 0; j < getcity.length; j++) {
                        if(getcity[j].level == 3 && getcity[j].parent_code == s2) {
                            temp_html3 += "<option name=\"" + getcity[j].abbr + "\" value=\"" + getcity[j].code + "\">" + getcity[j].name + "</option>"; //获取3级城市目录
                        } else if(getcity[j].level == 2 && getcity[j].parent_code == s1) {
                            temp_html2 += "<option name=\"" + getcity[j].abbr + "\" value=\"" + getcity[j].code + "\">" + getcity[j].name + "</option>"; //获取2级城市目录
                        }
                    }
                    city_obj.append(temp_html2);
                    city_obj.val(s2); //获取2级城市目录并赋值

                    district_obj.append(temp_html3);
                    if(ldata.substr(4, 6) != "00") {
                        district_obj.val(ldata); //获取3级城市目录并赋值
                    }
                }
            }
        }
    }

    var init = function() { // 遍历赋值省份下拉列表
        temp_html = select_prehtml;
        $.each(getcity, function(i, prov) {
            if(prov.level == 1) {
                temp_html += "<option name=\"" + prov.abbr + "\" value=\"" + prov.code + "\">" + prov.name + "</option>";
            }

        });
        prov_obj.append(temp_html);

        prov_obj.bind("change", function() {
            setCity();
        });

        city_obj.bind("change", function() {
            setArea();

        });
        district_obj.bind("change", function() {
            getdist();
        });
    };
    //加载json数据
    $.getJSON('http://static.egtcp.com/static/datas/city.json', function(data) {
        getcity = data.area;
        init();
        load_city();
    });
})