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>

您可能感兴趣的文章:

• jQuery+PHP+MySQL实现无限级联下拉框效果
• JQuery实现级联下拉框效果实例讲解
• jQuery制作简洁的多级联动Select下拉框
• 基于jquery的无限级联下拉框js插件
• 省市区三级联动下拉框菜单javascript版
• jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
• javascript实现省市区三级联动下拉框菜单
• js实现的下拉框二级联动效果
• js+xml生成级联下拉框代码
• jQuery实现级联下拉框实战（5）