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

复制代码 代码如下:

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

调用方法

<pre code_snippet_id="193059" snippet_file_name="blog_20140218_4_4987391" name="code" class="javascript"><script type="text/javascript"> <BR>$(function () { <BR>$("#cascade").Load({ url: '@Url.Action("GetCountryArea")', parameter: { "parentId": 0, "random": Math.random() } }); <BR>}); <BR></script>

<div id="cascade"> <br><select id="ddl1" class="ddl"></select> <br>
</div> <br><input id="loadselect" hidden="hidden" value="1,2"> <br><input id="selectvalue" hidden="hidden">