LvMax
- 浏览: 141182 次
- 性别:
- 来自: 江门
-
文章分类
最新评论
-
hjl416148489：
三级联动演示下载：http://www.sucaihuo.co ...
jQuery Ajax三级联动
$.getJSON版
$.ajax版
<script type="text/javascript">
$(document).ready(function(){
var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象
{
//创建option对象，并设置文本为"请选择"，value值为-1
var opt = $("<option/>").text("请选择").attr("value", "-1");
//将option对象添加到select中
jq.append(opt);
}
//获取请求的URL
var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";
/*
通过 HTTP GET 请求载入 JSON 数据
json : JSON对象
*/
$.getJSON(requestUrl, function(json){
//遍历JSON对象
$(json).each(function(){
//创建option对象并设置相应的文本值和value值
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
//将option对象添加到匹配的jQuery对象中
$("#branchOne").append(opt);
});
});
$("#branchOne").change(function(){
//获取请求的URL
var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";
//获取下拉菜单的value值
var branchId = $(this).val();
if(branchId != "-1")
{
// {"branchID" : branchId} ： 传入参数
$.getJSON(requestUrl, {"branchID" : branchId}, function(json){
$("#branchTwo").empty();
//$("#branchTwo").append($("<option/>").text("请选择").attr("value", "-1"));
addSelOption($("#branchTwo"));
//遍历JSON对象
$(json).each(function(){
//创建option对象并设置相应的文本值和value值
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
//将option对象添加到匹配的jQuery对象中
$("#branchTwo").append(opt);
});
$("#branchTwo").change(function(){
//获取下拉菜单的value值
var branchId = $(this).val();
//获取请求的URL
var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";
if(branchId != "-1")
{
$.getJSON(requestUrl, {"branchID" : branchId}, function(json){
$("#branchThree").empty();
addSelOption($("#branchThree"));
//遍历JSON对象
$(json).each(function(){
//创建option对象并设置相应的文本值和value值
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
//将option对象添加到匹配的jQuery对象中
$("#branchThree").append(opt);
});
});
}
else
{
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
});
}
else
{
$("#branchTwo").empty();
addSelOption($("#branchTwo"));
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
});
</script>
$.ajax版
<script type="text/javascript">
$(document).ready(function(){
var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象
{
//创建option对象，并设置文本为"请选择"，value值为-1
var opt = $("<option/>").text("请选择").attr("value", "-1");
//将option对象添加到select中
jq.append(opt);
}
//添加span节点并添加loadding的gif图片
var loadImg = function(br){
$("#loaddingImg").find("img").remove();
var oSpan = $("<span id='loaddingImg'><img src='/TheOneHRWeb/images/loadding_indicator.gif' /></span>");
br.after(oSpan);
}
var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";
$.ajax({
//type : "get", //默认为get
dataType : "json",
url : requestUrl,
success : function(json){
$(json).each(function(){
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
$("#branchOne").append(opt);
});
$("#branchOne").change(function(){
var branchId = $(this).val();
if(branchId != "-1"){
var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";
$.ajax({
dataType : "json",
url : requestUrl,
//传入的参数
data : "branchID=" + branchId,
//发送请求前加载loadding的gif图片
beforeSend : loadImg($("#branchOne")),
success : function(json){
//删除gif图片的span节点
$("#loaddingImg").remove();
$("#branchTwo").empty();
addSelOption($("#branchTwo"));
$(json).each(function(){
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
$("#branchTwo").append(opt);
});
}
});
}
else{
$("#branchTwo").empty();
addSelOption($("#branchTwo"));
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
$("#branchTwo").change(function(){
var branchId = $(this).val();
if(branchId != "-1"){
var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";
$.ajax({
dataType : "json",
url : requestUrl,
data : "branchID=" + branchId,
beforeSend : loadImg($("#branchTwo")),
success : function(json){
$("#loaddingImg").remove();
$("#branchThree").empty();
addSelOption($("#branchThree"));
$(json).each(function(){
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
$("#branchThree").append(opt);
});
}
});
}
else{
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
}
});
});
</script>
I级机构: <select id="branchOne">
<option selected="selected" value="-1">请选择</option>
</select>
II级机构:<select id="branchTwo">
<option selected="selected" value="-1">请选择</option>
</select>
III级机构:<select id="branchThree">
<option selected="selected" value="-1">请选择</option>
</select>
分享到：
发表评论
相关推荐
asp.net jquery ajax 全国省市区三级联动
NULL 博文链接：https://huigege.iteye.com/blog/1852954
Jquery实现ajax三级联动
jQuery Ajax 三级省市联动 (JSON)
jquery+php+mysql省市县Ajax三级联动代码
ajax使用jquery json实现的省市县三级联动经验总结
struts2 jquery json ajax 三级联动菜单 可直接部署使用 需添加数据库查询代码
jqueryajax地区省市镇三级联动代码
jquery结合ajax和xml实现省市县三级联动,chaojixuan
, 用Jquery实现的三级联动下拉列表插件，压缩包内有多个不同的版本，其实现的基本原理大同小异，无非是调用方式的不同，第一个是通过读取XML构建，支持IE/firefox，chrome不支持，XML部分可以改成AJAX的方式，这样...
jquery+ajax+json省市区三级联动,支持本地ip获得地址,可以变成两级联动.已在IE,FIREFOX,CHORME测试,欢迎继续更新学习
用jQuery实现的解析XML的无刷新的省市三级联动。有加载的过程的进度显示，用户体验超好。
省市选择三级联动，Html+Jquery+XML+Ajax实现，无论php，jsp, html, asp ，aspx等各种语言都通用。 http://blog.csdn.net/ful1021/article/details/16310667 详细查看地址
包括两种联动方式， 一种是传统的jquery+ajax+select, 一种是jquery+ajax+select+div+css，自定义select样式实现数据联动。 都可直接使用。里面有使用事例
用jquery、ajax读取json数据实现select列表的三级联动(下拉列表三级联动)
jquery_ajax_php_三级联动 jquery_ajax_php_三级联动 jquery_ajax_php_三级联动
第一次上传，给点面子，多提宝贵意见（我上传的东西是不是有点火星了）反正我看着网上没有
使用jQuery——ajax做的三级联动