/*

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);

调用方法

异步ajax动态实现级联,JQuery异步加载无限下拉框级联功能实现示例相关推荐

  1. 让你的微信小程序对用户更加友好:上拉加载和下拉刷新就是关键

    前言 上拉加载和下拉刷新是小程序开发的常见需求.本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能,为用户带来更加流畅.便捷的使用体验. 实现效果如下: 实现思路: 1. 首先需要在使用到的 j ...

  2. 级联查询ajax,Jquery+Ajax下拉框级联查询

    Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...

  3. php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...

    这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...

  4. ListView上拉加载和下拉刷新多种实现方式

    ListView上拉加载和下拉刷新多种实现方式 该篇为ListView下拉刷新和上拉加载实现的各种方法大合集.可能在具体的细节逻辑上处理不太到位,但基本上完成逻辑的实现.细节方面,个人可以根据自己的需 ...

  5. html5上拉下拉刷新,APP 上拉加载,下拉刷新 介绍

    开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种. 一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新. 1.原生APP 的 上拉加载, ...

  6. better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)

    一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...

  7. 小程序上拉加载,下拉刷新

    小程序上拉加载,下拉刷新 data: {collectinformation: null,number: 1,size: 10,isOpenLoading: true,isEmpty: true,is ...

  8. 基于iSroll 5.0实现的上拉加载和下拉刷新插件

    Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...

  9. tableview插入刷新_iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码...

    废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" ...

  10. IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题

    IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题 参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...

最新文章

  1. Java学习总结:46(内存流)
  2. 归纳DOM事件中各种阻止方法
  3. Python语言的全部数据类型分享!
  4. 在echarts3中使用字符云
  5. Java集合unmodifiableSortedSet()方法(带示例)
  6. jhipster项目迁移websocket
  7. Python 函数(类)的装饰器与闭包
  8. SparkSQL JSON数据操作(1.3-1.4)
  9. EhCache初体验
  10. Qt中文字符串按照拼音排序
  11. Redis常用密令以及使用java连接操作redis
  12. contents()与children()的用法和区别
  13. 服务器后台日志文件的清理经验分享
  14. laravel 上传图片
  15. Excel:数据分列功能分割文本
  16. Arduino IDE+_Attiny13/85实践(四) Mind+ 与Attiny85
  17. 计算机考试C1-1随笔
  18. 弹出框美化 alert样式美化
  19. ffmpeg 截取视频片段 - python
  20. 神经网络概念解释和特点,神经网络概念解释大全

热门文章

  1. c语言中rcu缩写,ICU、MICU、EICU、NICU、NCU、CCU、RCU,科室英文缩写大全
  2. Why bugs don’t get fixed? 不是所有的Bug都要修复
  3. Centos 7安装和配置 ElasticSearch入门小白
  4. Spring框架中的核心思想包括什么
  5. NodeJS stream 一:Buffer
  6. C++高级进阶 第二季:mutable 关键字
  7. 百度地图API学习之路(1)
  8. wordpress如何去掉顶部工具条
  9. 修改wordpress的footer内容
  10. windows守护进程工具_Linux进程管理