這篇文章主要介紹了JQuery異步加載無限下拉框級聯功能的實現,需要的朋友可以參考下
代碼如下: <pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/* JQuery異步加載無限極下拉框級聯功能 zjy */ (function ($) { $.ajaxSetup({ async: false }); var url = ""; var parameter = ""; $.fn.extend({ Load: function (urlPath) { url = urlPath.url; parameter = urlPath.parameter; $("#ddl1").append("<option value='0'selected='selected'>請選擇</option>"); $.getJSON(url, parameter, function (data) { $.each(data.rows, function (i, row) { $("#ddl1").append($("<option></option>").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) { $("<select>", { "class": "ddl", change: function () { $(this).Select($(this).val(), this); } }).appendTo($("#cascade")); $($(".ddl")[$(".ddl").length - 1]).append("<option value='0' selected='selected'>請選擇</option>"); $.each(data.rows, function (i, row) { $($(".ddl")[$(".ddl").length - 1]).append($("<option></option>").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); </pre><pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript"></pre><pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript"></pre><pre code_snippet_id="193059" snippet_file_name="blog_20140218_2_4146793" name="code" class="javascript"></pre><pre code_snippet_id="193059" snippet_file_name="blog_20140218_3_3034761" name="code" class="javascript">調用方法</pre><pre code_snippet_id="193059" snippet_file_name="blog_20140218_4_4987391" name="code" class="javascript"><pre code_snippet_id="193059" snippet_file_name="blog_20140218_4_4987391" name="code" class="javascript"><script type="text/javascript"> $(function () { $("#cascade").Load({ url: '@Url.Action("GetCountryArea")', parameter: { "parentId": 0, "random": Math.random() } }); }); </script></pre><br> <pre code_snippet_id="193059" snippet_file_name="blog_20140218_5_843717" name="code" class="html"><div id="cascade"> <select id="ddl1" class="ddl"></select> </div> <input id="loadselect" hidden="hidden" value="1,2"/> <input id="selectvalue" hidden="hidden" /></pre><br> <br> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> </pre>