JQuery異步加載無限下拉框級(jí)聯(lián)功能實(shí)現(xiàn)示例
<pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/*
JQuery異步加載無限極下拉框級(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)無限級(jí)聯(lián)下拉框效果
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- 基于jquery的無限級(jí)聯(lián)下拉框js插件
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- jsp從數(shù)據(jù)庫獲取數(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的選擇標(biāo)簽至文本域效果,可多選/可過濾重復(fù)/可限制個(gè)數(shù)的實(shí)現(xiàn)代碼
選擇標(biāo)簽至表單域插件, 基于jQuery, 可多選/可過濾重復(fù)/可限制個(gè)數(shù). 是以前的項(xiàng)目中用到過的一個(gè)項(xiàng)目, 當(dāng)初是用原生js東拼西湊的, 用jQuery重寫了下,已封裝成插件.2010-11-11jQuery模仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果
在京東或者是天貓上可以看到左側(cè)分類導(dǎo)航菜單,當(dāng)鼠標(biāo)滑過導(dǎo)航分類時(shí),會(huì)出現(xiàn)詳細(xì)分類模塊,鼠標(biāo)移開就會(huì)恢復(fù)默認(rèn)樣式,下面小編給大家?guī)砹嘶?mouseenter()和mouseleave()實(shí)現(xiàn)仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果,一起看看吧2016-06-06jquery選擇器和屬性對(duì)象的操作實(shí)例分析
這篇文章主要介紹了jquery選擇器和屬性對(duì)象的操作,結(jié)合實(shí)例形式分析了jquery選擇器與頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2020-01-01jQuery簡(jiǎn)單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jQuery通用的全局遍歷方法$.each()用法實(shí)例
這篇文章主要介紹了jQuery通用的全局遍歷方法$.each()用法,結(jié)合實(shí)例形式分析了$.each()方法實(shí)現(xiàn)遍歷功能的相關(guān)技巧,需要的朋友可以參考下2016-07-07jQuery maxlength文本字?jǐn)?shù)限制插件
相信大家對(duì)twitter類的微博客都不陌生,作為一句話博客其字?jǐn)?shù)即時(shí)提示效果設(shè)計(jì)的非常人性化.2010-04-04jQuery實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn),再點(diǎn)擊恢復(fù)初始狀態(tài)動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn),再點(diǎn)擊恢復(fù)初始狀態(tài)動(dòng)畫效果,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12