在博客园看到一篇不错的AJAX级联下拉列表，觉得不错，特地拿下来 ：转载来自：『大雪无痕』，原文地址
1 //当一个 下拉列表 改变时，触发所有联动；（警告：各下拉列表之间 请不要出现 循环依赖） 2 //本函数，遵守如下规范：不使用任何内存数据（所有数据都是 即时使用，即时获取，数据实时），不初始化注册， 3 //该规范可以在 HTML 出现任何意外时，保持最好的稳定 4 function RefreshLinkage(ddlCtrl) { 5var curId = !ddlCtrl ? "" : ddlCtrl.id; 6//if (curId == undefined || curId.replace(" ","").length <= 0) return;//不指定刷新控件，则刷新所有控件 7//var curValue = ddlCtrl.value;//只要触发之后，让子控件自己寻找需要的值：不需要当前值 8 9if (curId && ddlCtrl) { 10 var hfValueCtrlId = $(ddlCtrl).attr("valueCtrlId"); 11 if (!hfValueCtrlId) hfValueCtrlId = "hf_" + curId; 12 $("#" + hfValueCtrlId).val($(ddlCtrl).val()); 13} 14 15$("select").each(function (index, elem) { 16 if (!curId || elem.id != curId) { //全部刷新 或者 不联动自己 17 var parentId = $(elem).attr("parentId"); 18 if (parentId != undefined && ("" + parentId).replace(" ", "").length > 0) { 19 var parentIds = parentId.split(','); //分割父级Id 20 if (!curId || parentIds.indexOf(curId) >= 0) { //如果某个控件被当前控件联动 21 //操作 联动子控件 22 refreshOptions(elem); 23 } 24 } 25 } 26}); 27 28//刷新 指定的下拉列表 29function refreshOptions(elem) { 30 if (!elem || !elem.id) return; 3132 var parentId = $(elem).attr("parentId"); 33 var parentKey = $(elem).attr("parentKey"); 34 if (!parentId || !parentKey) return; 35 36 var parentIds = parentId.split(','); 37 var parentKeys = parentKey.split(','); 38 39 if (parentKeys.length != parentIds.length) 40 throw new Error("Linkage Select \"" + elem.id + "\": 'ParentKey' And 'ParentId' Length Is Not Same!"); 41 42 var elemValueId = $(ddlCtrl).attr("valueCtrlId"); 43 if (!elemValueId) elemValueId = "hf_" + elem.id; 44 45 46 //清空下拉列表 47 if ($(elem).find("option").length > 0) 48 $("#" + elemValueId).val(''); 49 $(elem).find("option").remove(); 50 51 //创建默认行 52 var withEmpty = $(elem).attr("withEmpty") != "false"; 53 var emptyValue = ($(elem).attr("emptyValue") || ''); 54 var emptyText = ($(elem).attr("emptyText") || ((GetSettingValue("IsEnglish", true)) ? "Please Select" : "请选择")); 55 if (withEmpty) { 56 $(elem).append("<option value='{V}'>{T}</option>".replace("{V}", emptyValue).replace("{T}", emptyText)); 57 } 58 59 60 //需要的数据 61 var parentIsEmpty = true; 62 var jsonStr = "{ \"__Action\":\"RefreshSelect\", \"__SelectCtrl\":\"" + elem.id + "\", "; 63 for (var j = 0; j < parentKeys.length; j++) { 64 var parentValue = ($("#" + parentIds[j]).val() || ''); 65 jsonStr = jsonStr + "\"" + parentKeys[j] + "\":\"" + parentValue + "\"" + (j == parentKeys.length - 1 ? "" : ", "); 66 if (parentValue && parentValue != emptyValue) parentIsEmpty = false; 67 } 68 jsonStr = jsonStr + "}"; 69 70 71 //如果所有父级都没有数据 则 不进行 Ajax 72 if (parentIsEmpty) return; 73 74 75 //Ajax提交 76 var jsonData = JSON.parse(jsonStr); 77 var postUrl = ($(elem).attr("postUrl") || (window.location.href)); //没有指定 Post地址，则 指向 自身页面 78 postUrl = postUrl + (postUrl.indexOf("?") >= 0 ? ("&_rd=" + Math.random()) : ("?_rd=" + Math.random())); //防止缓存 79 $.post(postUrl, jsonData, 80 function (data, status) { 81 //alert("Data: " + data + "\nStatus: " + status); 82 if (data != undefined && data.length > 0) { 83 //动态获取的行 84 var optionTemp = ($(elem).attr("optionTemp") || "<option value='{V}'>{T}</option>"); 85 $.each(data, function (itemIndex, itemElem) { 86var html = perfectExpres(optionTemp, itemElem); 87$(elem).append(html); 88 }); 89 90 //用隐藏控件的值赋给 下拉列表控件 91 var $valueCtrl = $("#" + elemValueId); 92 if($valueCtrl.length>0) 93$(elem).val($valueCtrl.val()); 94 95 //触发这个被改变的 下拉列表的改变事件 96 RefreshLinkage(elem); 97 } 98 }, "json"); 99}100 101//循环 object 中的所有属性，替换 expres 中，对应的部分；102function perfectExpres(expres, object) {103 for (var key in object) {104 expres = expres.replace("{" + key + "}", (object[key] || ''));105 }106 return expres;107}108 }
