用ajax实现三级联动

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="../jq.js"></script>
 7 <script src="sanji.js"></script>
 8 </head>
 9 
10 <body>
11 <h1>三级联动</h1>
12 <div id="sanji"></div>
13 </body>
14 </html>

07:38:10

  1 $(document).ready(function(e) {
  2     //在div里面造三个下拉
  3     $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
  4     //填充数据
  5     FillSheng();//填充省
  6     FillShi();//填充市
  7     FillQu();//填充区
  8     
  9     //同步异步，同步就是是指在AJAX处理数据的时候，必须等到处理完成才能执行下面的语句，异步就是在AJAX处理数据的时候，不用等到处理完，下面的语句就可以执行
 10     //同步在交换信息的时候，必须等到对方确认接收之后再发送下一条
 11     //异步在交换信息的时候，只管向对方发送，不用管对方有没有答复
 12     //表现在线程上，同步相当于单线程处理一个请求，异步相当于多线程同时处理多个
 13     
 14     //填充省的方法
 15     function FillSheng()
 16     {
 17         var code="0001";
 18         $.ajax({
 19             async:false,//ajax变为同步
 20             url:"ChuLi.php",
 21             data:{code:code},
 22             type:'POST',
 23             dataType:"TEXT",
 24             success: function(data){
 25                 
 26                 var hang=data.split("|");
 27                 var str="";
 28                 for(var i=0;i<hang.length;i++)
 29                 {
 30                     var lie=hang[i].split("^");
 31                     
 32                     str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"
 33                     
 34                     
 35                     
 36                 }
 37                 
 38                 //将所有的option省下拉里面
 39                     $("#sheng").html(str);
 40                     
 41                 
 42                 
 43             }
 44             
 45             
 46             
 47             
 48             
 49             
 50             });
 51         
 52         
 53         }
 54         
 55         function FillShi()
 56     {
 57         var code=$("#sheng").val();
 58         $.ajax({
 59             async:false,//ajax变为同步
 60             url:"ChuLi.php",
 61             data:{code:code},
 62             type:'POST',
 63             dataType:"TEXT",
 64             success: function(data){
 65                 
 66                 var hang=data.split("|");
 67                 var str="";
 68                 for(var i=0;i<hang.length;i++)
 69                 {
 70                     var lie=hang[i].split("^");
 71                     
 72                     str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"
 73                     
 74                     
 75                     
 76                 }
 77                 
 78                 //将所有的option省下拉里面
 79                     $("#shi").html(str);
 80                     
 81                 
 82                 
 83             }
 84             
 85             
 86             
 87             
 88             
 89             
 90             });
 91         
 92         
 93         }
 94         function FillQu()
 95     {
 96         var code=$("#shi").val();
 97         $.ajax({
 98             async:false,//ajax变为同步
 99             url:"ChuLi.php",
100             data:{code:code},

<?PHP

include("class.php");
$db=new DBDA();

$pcode=$_POST["code"];

$sql="select AreaCode,AreaName from ChinaStates where ParentAreaCode='{$pcode}'" ;

$str=$db->StrQuery($sql);

echo $str;

101             type:'POST',
102             dataType:"TEXT",
103             success: function(data){
104                 
105                 var hang=data.split("|");
106                 var str="";
107                 for(var i=0;i<hang.length;i++)
108                 {
109                     var lie=hang[i].split("^");
110                     
111                     str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"
112                     
113                     
114                     
115                 }
116                 
117                 //将所有的option省下拉里面
118                     $("#qu").html(str);
119                     
120                 
121                 
122             }
123             
124             
125             
126             
127             
128             
129             });
130         
131         
132         }
133         //当省的选中发生变化的时候，去改变市和区
134     $("#sheng").change(function(){
135             FillShi();
136             FillQu();
137         })
138         
139     //当市的选中发生变化的时候，去改变区
140     $("#shi").change(function(){
141             FillQu();
142         })
143 });