转：『代码』JS封装 Ajax级联下拉列表

在博客园看到一篇不错的AJAX级联下拉列表，觉得不错，特地拿下来 ：转载来自：『大雪无痕』 ，原文地址

//当一个 下拉列表 改变时，触发所有联动；（警告：各下拉列表之间 请不要出现 循环依赖）
//本函数，遵守如下规范：不使用任何内存数据（所有数据都是 即时使用，即时获取，数据实时），不初始化注册，
//该规范可以在 HTML 出现任何意外时，保持最好的稳定
function RefreshLinkage(ddlCtrl) {
    var curId = !ddlCtrl ? "" : ddlCtrl.id;
    //if (curId == undefined || curId.replace(" ","").length <= 0) return;      //不指定刷新控件，则刷新所有控件
    //var curValue = ddlCtrl.value;                                             //只要触发之后，让子控件自己寻找需要的值：不需要当前值

    if (curId && ddlCtrl) {
        var hfValueCtrlId = $(ddlCtrl).attr("valueCtrlId");
        if (!hfValueCtrlId) hfValueCtrlId = "hf_" + curId;
        $("#" + hfValueCtrlId).val($(ddlCtrl).val());
    }

    $("select").each(function (index, elem) {
        if (!curId || elem.id != curId) { //全部刷新 或者 不联动自己 
            var parentId = $(elem).attr("parentId");
            if (parentId != undefined && ("" + parentId).replace(" ", "").length > 0) {
                var parentIds = parentId.split(','); //分割父级Id
                if (!curId || parentIds.indexOf(curId) >= 0) { //如果某个控件被当前控件联动
                    //操作 联动子控件
                    refreshOptions(elem);
                }
            }
        }
    });

    //刷新 指定的下拉列表
    function refreshOptions(elem) {
        if (!elem || !elem.id) return;
        
        var parentId = $(elem).attr("parentId");
        var parentKey = $(elem).attr("parentKey");
        if (!parentId || !parentKey) return;

        var parentIds = parentId.split(',');
        var parentKeys = parentKey.split(',');

        if (parentKeys.length != parentIds.length)
            throw new Error("Linkage Select \"" + elem.id + "\": 'ParentKey' And 'ParentId' Length Is Not Same!");

        var elemValueId = $(ddlCtrl).attr("valueCtrlId");
        if (!elemValueId) elemValueId = "hf_" + elem.id;


        //清空下拉列表
        if ($(elem).find("option").length > 0)  
            $("#" + elemValueId).val('');
        $(elem).find("option").remove();

        //创建默认行
        var withEmpty = $(elem).attr("withEmpty") != "false";
        var emptyValue = ($(elem).attr("emptyValue") || '');
        var emptyText = ($(elem).attr("emptyText") || ((GetSettingValue("IsEnglish", true)) ? "Please Select" : "请选择"));
        if (withEmpty) {
            $(elem).append("<option value='{V}'>{T}</option>".replace("{V}", emptyValue).replace("{T}", emptyText));
        }


        //需要的数据
        var parentIsEmpty = true;
        var jsonStr = "{ \"__Action\":\"RefreshSelect\", \"__SelectCtrl\":\"" + elem.id + "\", ";
        for (var j = 0; j < parentKeys.length; j++) {
            var parentValue = ($("#" + parentIds[j]).val() || '');
            jsonStr = jsonStr + "\"" + parentKeys[j] + "\":\"" + parentValue + "\"" + (j == parentKeys.length - 1 ? "" : ", ");
            if (parentValue && parentValue != emptyValue) parentIsEmpty = false;
        }
        jsonStr = jsonStr + "}";


        //如果所有父级都没有数据 则 不进行 Ajax
        if (parentIsEmpty) return;


        //Ajax提交
        var jsonData = JSON.parse(jsonStr);
        var postUrl = ($(elem).attr("postUrl") || (window.location.href));  //没有指定 Post地址，则 指向 自身页面
        postUrl = postUrl + (postUrl.indexOf("?") >= 0 ? ("&_rd=" + Math.random()) : ("?_rd=" + Math.random()));  //防止缓存
        $.post(postUrl, jsonData,
            function (data, status) {
                //alert("Data: " + data + "\nStatus: " + status);
                if (data != undefined && data.length > 0) {
                    //动态获取的行
                    var optionTemp = ($(elem).attr("optionTemp") || "<option value='{V}'>{T}</option>");
                    $.each(data, function (itemIndex, itemElem) {
                        var html = perfectExpres(optionTemp, itemElem);
                        $(elem).append(html);
                    });

                    //用隐藏控件的值赋给 下拉列表控件
                    var $valueCtrl = $("#" + elemValueId);
                    if($valueCtrl.length>0)
                        $(elem).val($valueCtrl.val());
                    
                    //触发这个被改变的 下拉列表的改变事件
                    RefreshLinkage(elem);
                }
            }, "json");
    }

    //循环 object 中的所有属性，替换 expres 中，对应的部分；
    function perfectExpres(expres, object) {
        for (var key in object) {
            expres = expres.replace("{" + key + "}", (object[key] || ''));
        }
        return expres;
    }
}