JQuery异步加载无限下拉框级联功能实现示例

复制代码 代码如下:

/* 
  
JQuery异步加载无限极下拉框级联功能 
  
zjy 
  
*/ 
  
(function ($) { 
  
$.ajaxSetup({ async: false }); 
  
var url = ""; 
  
var parameter = ""; 
  
$.fn.extend({ 
  
Load: function (urlPath) { 
  
url = urlPath.url; 
  
parameter = urlPath.parameter; 
  
$("#ddl1").append("请选择"); 
  
$.getJSON(url, parameter, function (data) { 
  
$.each(data.rows, function (i, row) { 
  
$("#ddl1").append($("").val(row.id).html(row.text)); 
  
}); 
  
$("#ddl1").change(function () { $(this).Select($(this).val(), this); }); 
  
}); 
  
$(this).Selected(parameter.parentId, $("#ddl1")); 
  
}, 
  
 
  
Select: function (parentId, obj) { 
  
//debugger; 
  
if (parentId == "0") { 
  
return; 
  
} 
  
parameter.parentId = parentId; 
  
$.getJSON(url, parameter, function (data) { 
  
$(obj).nextAll(".ddl").remove(); 
  
if (data != null) { 
  
$("", { 
  
"class": "ddl", 
  
change: function () { 
  
$(this).Select($(this).val(), this); 
  
} 
  
}).appendTo($("#cascade")); 
  
 
  
$($(".ddl")[$(".ddl").length - 1]).append("请选择"); 
  
$.each(data.rows, function (i, row) { 
  
$($(".ddl")[$(".ddl").length - 1]).append($("").val(row.id).html(row.text)); 
  
}); 
  
} 
  
}); 
  
$(this).Selected(parentId, $(obj).nextAll(".ddl")); 
  
}, 
  
 
  
Selected: function (parentId, obj) { 
  
$(this).GetValue(); 
  
//debugger; 
  
var selected = "0," + $("#loadselect").val(); 
  
$.each(selected.split(","), function (i, row) { 
  
if (row == parentId) { 
  
//debugger; 
  
$(obj).val(selected.split(",")[i + 1]); 
  
$(obj).change(); 
  
} 
  
}); 
  
}, 
  
 
  
GetValue: function () { 
  
var ddlValue; 
  
var ddlCount = $(".ddl").length; 
  
for (var i = ddlCount - 1; i >= 0; i--) { 
  
if (i != 0) { 
  
if ($($(".ddl")[i]).val() != 0) { 
  
ddlValue = $($(".ddl")[i]).val(); 
  
break; 
  
} 
  
} else { 
  
if ($($(".ddl")[i]).val() == 0) { 
  
ddlValue = 0; 
  
break; 
  
} else { 
  
ddlValue = $($(".ddl")[i]).val(); 
  
break; 
  
} 
  
} 
  
} 
  
$("#selectvalue").val(ddlValue); 
  
}, 
  
}); 
  
})(jQuery); 
  
调用方法