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 });