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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
js利用iframe实现选项卡效果
Aug 09 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
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
python实现telnet客户端的方法
2015/04/15 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
求职自荐信格式
2013/12/04 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
优秀学生获奖感言
2014/02/15 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
干部对照检查材料范文
2014/08/26 职场文书
收款委托书
2014/10/14 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
计算机实训心得体会
2016/01/14 职场文书