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


Posted in Javascript onFebruary 19, 2014
<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>
Javascript 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
js中的面向对象入门
Mar 06 Javascript
js判断是否是手机页面
Mar 17 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 #Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 #Javascript
javascript动态向网页中添加表格实现代码
Feb 19 #Javascript
javascript实现动态侧边栏代码
Feb 19 #Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 #Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 #Javascript
document.forms[].submit()使用介绍
Feb 19 #Javascript
You might like
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
Vue.js 插件开发详解
2017/03/29 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
遗传算法之Python实现代码
2017/10/10 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
详解Python中的Lock和Rlock
2021/01/26 Python
.net面试题
2015/12/22 面试题
意向协议书范本
2014/04/23 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
python playwright 自动等待和断言详解
2021/11/27 Python
改造DE1103三步曲
2022/04/07 无线电
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
Redis入门基础常用操作命令整理
2022/06/01 Redis