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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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新手上路(十一)
2006/10/09 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
详谈js模块化规范
2017/07/07 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
jQuery实现日历效果
2020/09/11 jQuery
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python实现画图软件功能方法详解
2020/07/28 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
体育教师自荐信范文
2013/12/16 职场文书
出国考察邀请函
2014/01/21 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android