JQuery asynchronous loading infinite drop-down box cascade function implementation example_jquery

Copy code The code is as follows:

/* <br>JQuery asynchronously loads the infinite drop-down box cascade function <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='selected'>Please select</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='selected'>Please select</option>"); <br>$.each(data .rows, function (i, row) { <br>$($(".ddl")[$(".ddl").length - 1]).append($("<option></option&gt ;").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>

<pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">

Call method

< pre code_snippet_id="193059" snippet_file_name="blog_20140218_4_4987391" name="code" class="javascript">

&lt ; 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" />

< ;pre>