欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-11-28 09:52:14
JQuery异步加载无限下拉框级联功能实现示例，代码如下: 
					

						
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"><p id="cascade">

<select id="ddl1" class="ddl"></select>

</p>

<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>
					

																				

						

							上一篇：							
								php中的魔术方法__call(),__clone(),__set(),__get()							
						

						

							下一篇：							
								五子良将的最后一战结果如何？揭秘一代名将的落幕							
						

					

															

						

							推荐阅读