PHP ajax 實現三級聯動

在一個單獨JS頁面中，利用ajax實現三級聯動，作成一個三級聯動形式，以便於之後隨時調用

JS代碼：

  1 $(document).ready(function(e) {
  2     $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
  3     
  4     //填充內容
  5     //填充省
  6     FileSheng();
  7     //填充市
  8     FileShi();
  9     //填充區
 10     FileQu();
 11     
 12     $("#sheng").change(function(){
 13         
 14         //當省變化的時候去調用市和區
 15         FileShi();
 16         FileQu();
 17         
 18         })
 19     $("#shi").change(function(){
 20         
 21         //當市變化的時候去調用區
 22         FileQu();
 23         
 24         })
 25     //調用省的方法
 26     function FileSheng()
 27     {
 28         //找到父級代號
 29          var pcode = "0001";
 30         //調用AJAX
 31         $.ajax({
 32             async:false,
 33             url:"ChuLi.php",
 34             data:{pcode:pcode},
 35             type:"POST",
 36             dataType:"TEXT",
 37             success: function(data){
 38                 
 39                 var str = "";
 40                 var hang = data.split("|");
 41                 for(var i=0; i<hang.length; i++)
 42                 {
 43                     var lie = hang[i].split("^");
 44                     str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 45                 }
 46                 $(a).html(str);
 47                 }
 48             
 49             });
 50     }
 51     //填充市的方法
 52     function FileShi()
 53     {
 54         //找到父級代號
 55         var pcode = $("#sheng").val();
 56         //調用AJAX
 57         $.ajax({
 58             async:false,
 59             url:"ChuLi.php",
 60             data:{pcode:pcode},
 61             type:"POST",
 62             dataType:"TEXT",
 63             success: function(data){
 64                 
 65                 var str = "";
 66                 var hang = data.split("|");
 67                 for(var i=0; i<hang.length; i++)
 68                 {
 69                     var lie = hang[i].split("^");
 70                     str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 71                 }
 72                 $("#shi").html(str);
 73                 
 74                 }
 75         });
 76     }
 77     function FileQu()
 78     {
 79         //找到父級代號
 80         var pcode = $("#shi").val();
 81         //調用AJAX
 82         $.ajax({
 83             async:false,
 84             url:"ChuLi.php",
 85             data:{pcode:pcode},
 86             type:"POST",
 87             dataType:"TEXT",
 88             success: function(data){
 89                 
 90                 var str = "";
 91                 var hang = data.split("|");
 92                 for(var i=0; i<hang.length; i++)
 93                 {
 94                     var lie = hang[i].split("^");
 95                     str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 96                 }
 97                 $("#qu").html(str);
 98                 
 99                 }
100         });
101     }
102         
103     
104     
105 });

這樣在一個<div>裏就能夠實現隨時調用三級聯動

 1 <div id="sanji"></div>