当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  代码如下: /* JQuery异步加载无限极下拉框级联功能 zjy */ (function ($) { $.ajaxSetup({ async: false }); var url = ""; var parameter = ""; $.fn.extend({ Load: function (urlPath) { url = urlPath.url; parameter = urlPath.parameter; $("#ddl1").append("请选择"); $.getJSON(url, param...

代码如下:

/* 
JQuery异步加载无限极下拉框级联功能
zjy
*/
(function ($) {
$.ajaxSetup({ async: false });
var url = "";
var parameter = "";
$.fn.extend({
Load: function (urlPath) {
url = urlPath.url;
parameter = urlPath.parameter;
$("#ddl1").append("请选择");
$.getJSON(url, parameter, function (data) {
$.each(data.rows, function (i, row) {
$("#ddl1").append($("").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) {
$("", {
"class": "ddl",
change: function () {
$(this).Select($(this).val(), this);
}
}).appendTo($("#cascade"));

$($(".ddl")[$(".ddl").length - 1]).append("请选择");
$.each(data.rows, function (i, row) {
$($(".ddl")[$(".ddl").length - 1]).append($("").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);
调用方法
 
$(function () {
$("#cascade").Load({ url: '@Url.Action("GetCountryArea")', parameter: { "parentId": 0, "random": Math.random() } });
});










 
 
 
 
 
 



    
 
 

您可能感兴趣的文章:

  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jquery ajaxSubmit 异步提交的简单实现
  • Jquery 数据异步提交的小例子
  • jquery异步请求并改变页面内容的实例分析
  • 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
  • Jquery easyui表单异步验证扩展
  • jQuery异步上传插件
  • jQuery异步验证用户名是否存在示例代码
  • 使用jquery.upload.js实现异步上传示例代码
  • jQuery异步加载数据并添加事件示例
  • 自写的jQuery异步加载数据添加事件
  • jquery的ajax异步请求接收返回json数据实例
  • 使用jQuery异步加载 JavaScript脚本解决方案
  • AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
  • Jquery Ajax解析XML数据(同步及异步调用)简单实例
  • jQuery dialog 异步调用数据(webserivce或ashx)的实现代码
  • Jquery.Form 异步提交表单的简单实例
  • jquery uploadify和apache Fileupload实现异步上传文件示例
  • jquery淡化版banner异步图片文字效果切换图片特效
  • jQuery 下拉菜单插件 jQuery menu-aim
  • jQuery下拉菜单插件 jQuery Simple Drop Down Menu
  • jquery下拉菜单效果 jquery点击弹出下拉菜单的例子
  • jQuery联动下拉框 jQuery optionTree
  • jQuery下拉选择插件 MagicCombo
  • jQuery下拉框美化插件 Select-or-Die
  • jQuery下拉框插件 FlexBox
  • jQuery 下拉列表插件 Heapbox
  • jQuery 下拉框插件 Selectik
  • jQuery 下拉菜单插件 menu-aim
  • oracle iis7站长之家
  • jQuery下拉列表插件 jQselectable
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery的父子兄弟节点查找示例代码
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  • Jquery在指定DIV加载HTML示例代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jQuery获得内容和属性方法及示例
  • jquery根据name属性查找示例
  • jQuery find与children方法示例
  • jQuery回车键绑定点击事件示例
  • jQuery 滚动示例插件 kinetic
  • jQuery设置CSS属性(示例)
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3