您的位置:首页 > Web前端 > JQuery

jQuery Ajax三级联动

2015-01-03 13:41 218 查看
$.getJSON版

Javascript代码
<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(bra
4000
nchId != "-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版

Javascript代码

<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>
Html代码
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: