jQuery Ajax三级联动
$.getJSON版<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>
页:
[1]