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 相关文章推荐
jQuery动画animate方法使用介绍
May 06 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
原生js实现九宫格拖拽换位
Jan 26 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 $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python实现感知机模型的示例
2020/09/30 Python
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
汽车专业毕业生自荐信
2013/11/03 职场文书
个人自荐材料
2014/05/23 职场文书
企业活动策划方案
2014/06/02 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
教师见习报告范文
2014/11/03 职场文书
复兴之路展览观后感
2015/06/02 职场文书
小学课改工作总结
2015/08/13 职场文书