<转>JQuery Ajax三级联动

$.getJSON版

Javascript代码  收藏代码
  1. <script type="text/javascript">  
  2.         $(document).ready(function(){  
  3.             var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象  
  4.             {  
  5.                 //创建option对象，并设置文本为"请选择"，value值为-1  
  6.                 var opt = $("<option/>").text("请选择").attr("value", "-1");  
  7.                 //将option对象添加到select中  
  8.                 jq.append(opt);  
  9.             }  
  10.             //获取请求的URL  
  11.             var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";  
  12.             /* 
  13.                 通过 HTTP GET 请求载入 JSON 数据 
  14.                 json : JSON对象 
  15.             */  
  16.             $.getJSON(requestUrl, function(json){  
  17.                 //遍历JSON对象  
  18.                 $(json).each(function(){  
  19.                     //创建option对象并设置相应的文本值和value值  
  20.                     var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);  
  21.                     //将option对象添加到匹配的jQuery对象中  
  22.                     $("#branchOne").append(opt);  
  23.                 });  
  24.             });  
  25.             $("#branchOne").change(function(){  
  26.                     //获取请求的URL  
  27.                     var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";  
  28.                     //获取下拉菜单的value值  
  29.                     var branchId = $(this).val();  
  30.                     if(branchId != "-1")  
  31.                     {  
  32.                         // {"branchID" : branchId} ： 传入参数  
  33.                         $.getJSON(requestUrl, {"branchID" : branchId}, function(json){  
  34.                             $("#branchTwo").empty();  
  35.                             //$("#branchTwo").append($("<option/>").text("请选择").attr("value", "-1"));  
  36.                             addSelOption($("#branchTwo"));  
  37.                             //遍历JSON对象  
  38.                             $(json).each(function(){  
  39.                                 //创建option对象并设置相应的文本值和value值  
  40.                                 var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);  
  41.                                 //将option对象添加到匹配的jQuery对象中  
  42.                                 $("#branchTwo").append(opt);  
  43.                             });  
  44.                            $("#branchTwo").change(function(){  
  45.                                 //获取下拉菜单的value值   
  46.                                 var branchId = $(this).val();   
  47.                                 //获取请求的URL  
  48.                                 var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";  
  49.                                 if(branchId != "-1")  
  50.                                 {   
  51.                                     $.getJSON(requestUrl, {"branchID" : branchId}, function(json){  
  52.                                         $("#branchThree").empty();  
  53.                                         addSelOption($("#branchThree"));  
  54.                                         //遍历JSON对象  
  55.                                         $(json).each(function(){  
  56.                                             //创建option对象并设置相应的文本值和value值  
  57.                                             var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);  
  58.                                             //将option对象添加到匹配的jQuery对象中  
  59.                                             $("#branchThree").append(opt);  
  60.                                         });  
  61.                                     });  
  62.                                 }   
  63.                                 else  
  64.                                 {  
  65.                                     $("#branchThree").empty();  
  66.                                     addSelOption($("#branchThree"));  
  67.                                 }  
  68.                            });  
  69.                         });  
  70.                     }  
  71.                     else  
  72.                     {  
  73.                         $("#branchTwo").empty();  
  74.                         addSelOption($("#branchTwo"));  
  75.                         $("#branchThree").empty();  
  76.                         addSelOption($("#branchThree"));  
  77.                     }               
  78.                 });  
  79.         });  
  80.     </script>  



$.ajax版

Javascript代码  收藏代码
  1. <script type="text/javascript">  
  2.         $(document).ready(function(){  
  3.             var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象  
  4.             {  
  5.                 //创建option对象，并设置文本为"请选择"，value值为-1  
  6.                 var opt = $("<option/>").text("请选择").attr("value", "-1");  
  7.                 //将option对象添加到select中  
  8.                 jq.append(opt);  
  9.             }  
  10.             //添加span节点并添加loadding的gif图片  
  11.             var loadImg = function(br){  
  12.                 $("#loaddingImg").find("img").remove();  
  13.                 var oSpan = $("<span id='loaddingImg'><img src='/TheOneHRWeb/images/loadding_indicator.gif' /></span>");  
  14.                 br.after(oSpan);  
  15.             }  
  16.             var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";  
  17.             $.ajax({  
  18.                 //type : "get", //默认为get  
  19.                 dataType : "json",  
  20.                 url : requestUrl,  
  21.                 success : function(json){  
  22.                     $(json).each(function(){  
  23.                         var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);  
  24.                         $("#branchOne").append(opt);  
  25.                     });  
  26.                     $("#branchOne").change(function(){  
  27.                         var branchId = $(this).val();  
  28.                         if(branchId != "-1"){  
  29.                             var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";  
  30.                             $.ajax({  
  31.                                 dataType : "json",  
  32.                                 url : requestUrl,  
  33.                                 //传入的参数  
  34.                                 data : "branchID=" + branchId,  
  35.                                 //发送请求前加载loadding的gif图片  
  36.                                 beforeSend : loadImg($("#branchOne")),  
  37.                                 success : function(json){  
  38.                                     //删除gif图片的span节点  
  39.                                     $("#loaddingImg").remove();  
  40.                                     $("#branchTwo").empty();  
  41.                                     addSelOption($("#branchTwo"));  
  42.                                     $(json).each(function(){  
  43.                                         var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);  
  44.                                         $("#branchTwo").append(opt);  
  45.                                     });  
  46.                                 }  
  47.                             });  
  48.                         }  
  49.                         else{  
  50.                             $("#branchTwo").empty();  
  51.                             addSelOption($("#branchTwo"));  
  52.                             $("#branchThree").empty();  
  53.                             addSelOption($("#branchThree"));  
  54.                         }  
  55.                     });  
  56.                     $("#branchTwo").change(function(){  
  57.                         var branchId = $(this).val();  
  58.                         if(branchId != "-1"){  
  59.                             var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";  
  60.                             $.ajax({  
  61.                                 dataType : "json",  
  62.                                 url : requestUrl,  
  63.                                 data : "branchID=" + branchId,  
  64.                                 beforeSend : loadImg($("#branchTwo")),  
  65.                                 success : function(json){  
  66.                                     $("#loaddingImg").remove();  
  67.                                     $("#branchThree").empty();  
  68.                                     addSelOption($("#branchThree"));  
  69.                                     $(json).each(function(){  
  70.                                         var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);  
  71.                                         $("#branchThree").append(opt);  
  72.                                     });  
  73.                                 }  
  74.                             });  
  75.                         }  
  76.                         else{  
  77.                             $("#branchThree").empty();  
  78.                             addSelOption($("#branchThree"));  
  79.                         }  
  80.                     });  
  81.                 }  
  82.             });  
  83.         });  
  84.     </script>  




Html代码  收藏代码
  1. I级机构: <select id="branchOne">  
  2.                         <option selected="selected" value="-1">请选择</option>  
  3.                     </select>  
  4.         II级机构:<select id="branchTwo">  
  5.                             <option selected="selected" value="-1">请选择</option>  
  6.                         </select>  
  7.          III级机构:<select id="branchThree">  
  8.                             <option selected="selected" value="-1">请选择</option>  
  9.                         </select> 

posted on 2015-11-23 13:47  hahahahahai12  阅读(157)  评论(0)    收藏  举报

导航