在博客园看到一篇不错的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 > ) {
var parentIds = parentId.split(','); //分割父级Id
if (!curId || parentIds.indexOf(curId) >= ) { //如果某个控件被当前控件联动
//操作 联动子控件
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 > )
$("#" + 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 = ; j < parentKeys.length; j++) {
var parentValue = ($("#" + parentIds[j]).val() || '');
jsonStr = jsonStr + "\"" + parentKeys[j] + "\":\"" + parentValue + "\"" + (j == parentKeys.length - ? "" : ", ");
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("?") >= ? ("&_rd=" + Math.random()) : ("?_rd=" + Math.random())); //防止缓存
$.post(postUrl, jsonData,
function (data, status) {
//alert("Data: " + data + "\nStatus: " + status);
if (data != undefined && data.length > ) {
//动态获取的行
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>)
$(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;
}
}
05-11 11:25