异步ajax动态实现级联,JQuery异步加载无限下拉框级联功能实现示例
/*
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. 首先需要在使用到的 j ...
- 级联查询ajax,Jquery+Ajax下拉框级联查询
Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...
- php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
- ListView上拉加载和下拉刷新多种实现方式
ListView上拉加载和下拉刷新多种实现方式 该篇为ListView下拉刷新和上拉加载实现的各种方法大合集.可能在具体的细节逻辑上处理不太到位,但基本上完成逻辑的实现.细节方面,个人可以根据自己的需 ...
- html5上拉下拉刷新,APP 上拉加载,下拉刷新 介绍
开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种. 一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新. 1.原生APP 的 上拉加载, ...
- better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...
- 小程序上拉加载,下拉刷新
小程序上拉加载,下拉刷新 data: {collectinformation: null,number: 1,size: 10,isOpenLoading: true,isEmpty: true,is ...
- 基于iSroll 5.0实现的上拉加载和下拉刷新插件
Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...
- tableview插入刷新_iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码...
废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" ...
- IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题 参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...
最新文章
- Java学习总结:46(内存流)
- 归纳DOM事件中各种阻止方法
- Python语言的全部数据类型分享!
- 在echarts3中使用字符云
- Java集合unmodifiableSortedSet()方法(带示例)
- jhipster项目迁移websocket
- Python 函数(类)的装饰器与闭包
- SparkSQL JSON数据操作(1.3-1.4)
- EhCache初体验
- Qt中文字符串按照拼音排序
- Redis常用密令以及使用java连接操作redis
- contents()与children()的用法和区别
- 服务器后台日志文件的清理经验分享
- laravel 上传图片
- Excel:数据分列功能分割文本
- Arduino IDE+_Attiny13/85实践(四) Mind+ 与Attiny85
- 计算机考试C1-1随笔
- 弹出框美化 alert样式美化
- ffmpeg 截取视频片段 - python
- 神经网络概念解释和特点,神经网络概念解释大全