JQuery asynchronous load infinite drop down box cascading implementation example

 
<pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript"> 
(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'> Please select a </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'> Please select a </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"> A method is called </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>