JQuery異步加載無(wú)限下拉框級(jí)聯(lián)功能實(shí)現(xiàn)示例
<pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/*
JQuery異步加載無(wú)限極下拉框級(jí)聯(lián)功能
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'>請(qǐng)選擇</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'>請(qǐng)選擇</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">調(diào)用方法</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實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉框效果
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- 基于jquery的無(wú)限級(jí)聯(lián)下拉框js插件
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- jsp從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- js實(shí)現(xiàn)的下拉框二級(jí)聯(lián)動(dòng)效果
- js+xml生成級(jí)聯(lián)下拉框代碼
- jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框?qū)崙?zhàn)(5)
相關(guān)文章
jquery調(diào)取json數(shù)據(jù)實(shí)現(xiàn)省市級(jí)聯(lián)的方法
這篇文章主要介紹了jquery調(diào)取json數(shù)據(jù)實(shí)現(xiàn)省市級(jí)聯(lián)的方法,可實(shí)現(xiàn)讀取json數(shù)據(jù)綁定到下拉菜單的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)實(shí)例
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)方法,結(jié)合完整實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)無(wú)刷新表格分頁(yè)的具體步驟與相關(guān)實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-02-02
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶(hù)名唯一性實(shí)例代碼
本文分為jsp代碼和后臺(tái)代碼給大家介紹了基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶(hù)名唯一性,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-06-06
基于jquery的direction圖片漸變動(dòng)畫(huà)效果
這個(gè)插件的制作用到j(luò)query的animate,fadeIn,fadeTo等動(dòng)畫(huà) 透明度之類(lèi)的知識(shí),對(duì)css的控制樣式也是很重要的2010-05-05
jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法
這篇文章主要介紹了jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
jquery實(shí)現(xiàn)放大鏡簡(jiǎn)潔代碼(推薦)
這篇文章主要介紹了jquery實(shí)現(xiàn)放大鏡簡(jiǎn)潔代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
使用jQuery簡(jiǎn)單實(shí)現(xiàn)模擬瀏覽器搜索功能
這篇文章主要介紹了使用jQuery簡(jiǎn)單實(shí)現(xiàn)模擬瀏覽器搜索功能,需要的朋友可以參考下2014-12-12
jQuery下實(shí)現(xiàn)等待指定元素加載完畢(可改成純js版)
下面就是我想到的等待元素出現(xiàn)方法,雖然是基于jQuery的,但是代碼很簡(jiǎn)潔,可以修改成純js版的,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07
jQuery.fn和jQuery.prototype區(qū)別介紹
jQuery.fn和jQuery.prototype想必大家對(duì)它并不陌生吧,那么你們知道它們之間的區(qū)別嗎?在本文有個(gè)不錯(cuò)的示例大家可以參考下2013-10-10

