请教地区三级联动

Question

/*读取省*/
function BindProvince(){
    $("select[name='ProvinceArea']").each(function(i){
        $.ajax({
            url: "ResumeBaseInfo.ashx",
            data: {
                param:"GetArea",
                thisType:"1"
            },
            dataType: "html",
            type: "GET",
            success: function(data) {
                $("select[name='ProvinceArea']").eq(i).append("<option value='-99'>请选择</option>");
                $("select[name='ProvinceArea']").eq(i).append(data);
            }
        });
    });
}
/*读取市*/
function BindCity(obj){
    $(obj).nextAll("select").find("option").remove();
    $.ajax({
            url: "ResumeBaseInfo.ashx",
            data: {
                param:"GetArea",
                thisType:"2",
                ParentAreaID:$(obj).val()
            },
            dataType: "html",
            type: "GET",
            success: function(data) {
                $(obj).next("select").append(data);
            }
    });
    //绑定三级节点
    BindDistrict($(obj).next("select"));
}
/*读取县*/
function BindDistrict(obj){
    $(obj).next("select").find("option").remove();
    $.ajax({
            url: "ResumeBaseInfo.ashx",
            data: {
                param:"GetArea",
                thisType:"2",
                ParentAreaID:$(obj).val()
            },
            dataType: "html",
            type: "GET",
            success: function(data) {
                $(obj).next("select").append(data);
            }
    });
}第一张图是页面第一次加载显示，选择户籍地区的第一级的时候，第三级没有出来
第二张图是在选择现居住地的第一级，第三级就出来了，请问这是怎么回事？
无论选哪个地区都一样，只要是第一次选，第三级是不会出来的，但是只要是被选过的，再选第三级就会自动出来，请教原因？是不是我的代码写得有问题？

Answer 1

/*读取县*/
function BindDistrict(obj){
    alert($(obj).val());
    $(obj).next("select").find("option").remove();
    $.ajax({
            url: "ResumeBaseInfo.ashx",
            data: {
                param:"GetArea",
                thisType:"2",
                ParentAreaID:$(obj).val()
            },
            dataType: "html",
            type: "GET",
            success: function(data) {
                $(obj).next("select").append(data);
            }
    });
}
我在读取县的时候+alert($(obj).val());就正常了可以实现三级联动了，很奇怪，希望高手帮我解答

Answer 2

ajax所获取的数据会不会在缓存里面，第一次的时候缓存内是没有的，当第二次加载之后，就保存在缓存内了

Answer 3

function BindCity(obj){
    $(obj).nextAll("select").find("option").remove();
    $.ajax({
            url: "ResumeBaseInfo.ashx",
            data: {
                param:"GetArea",
                thisType:"2",
                ParentAreaID:$(obj).val()
            },
            dataType: "html",
            type: "GET",
            success: function(data) {
                $(obj).next("select").append(data);
   //绑定三级节点
    BindDistrict($(obj).next("select"));
            }
    });
 
}

Answer 4

你的根据第二级读取第三级的数据。第二级都没有success 需要一段时间。
而你下面的BindDistrict($(obj).next("select"));是立即执行。应该把它也放success里。也就是当第二个菜单有值的时候，再出发第三个更新。