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 7 <script src="jquery-1.11.2.min.js"></script> 8 <script src="sj.js"></script> 9 </head> 10 11 <body> 12 <h1> 三级联动查询 </h1> 13 14 <div id="sanji"></div> 15 </body> 16 </html> 17 18 //自己写的JS包 19 20 $(document).ready(function(e) { 21 22 //在DIV里面造三个下拉 23 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 24 25 //填充数据 26 FillSheng(); //填充省的数据 27 FillShi(); //填充市的数据 28 FillQu(); //填充区的数据 29 30 //填充省的方法 31 function FillSheng() 32 { 33 var code = "0001"; //省的父级代号 34 //调用ajax查询省的数据 35 $.ajax({ 36 37 async:false, //变为同步AJAX 38 url:"cls.php", 39 data:{code:code}, 40 type:"POST", 41 dataType:"TEXT", 42 success: function(data){ 43 //拆分字符串，返回行的数组 44 var hang = data.split("|"); 45 var str = ""; 46 for(var i=0;i<hang.length;i++) 47 { 48 var lie = hang[i].split("^"); 49 50 //var a=lie[0].trim(); 51 str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 52 } 53 //将所有的option放到省下拉里面 54 $("#sheng").html(str); 55 } 56 57 }); 58 } 59 60 //填充市的方法 61 function FillShi() 62 { 63 var code = $("#sheng").val(); //市的父级代号 64 65 //调用ajax查询省的数据 66 $.ajax({ 67 68 async:false, //变为同步AJAX 69 url:"cls.php", 70 data:{code:code}, 71 type:"POST", 72 dataType:"TEXT", 73 success: function(data){ 74 75 //拆分字符串，返回行的数组 76 var hang = data.split("|"); 77 var str = ""; 78 for(var i=0;i<hang.length;i++) 79 { 80 var lie = hang[i].split("^"); 81 //var a = lie[0].trim(); 82 str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 83 } 84 //将所有的option放到省下拉里面 85 $("#shi").html(str); 86 } 87 88 }); 89 } 90 91 //填充区的方法 92 function FillQu() 93 { 94 var code = $("#shi").val(); //区的父级代号 95 //调用ajax查询省的数据 96 $.ajax({ 97 98 async:false, //变为同步AJAX 99 url:"cls.php", 100 data:{code:code}, 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 //将所有的option放到省下拉里面 114 $("#qu").html(str); 115 } 116 117 }); 118 } 119 120 //当省的选中发生变化的时候，去改变市和区 121 $("#sheng").change(function(){ 122 FillShi(); 123 FillQu(); 124 }) 125 126 //当市的选中发生变化的时候，去改变区 127 $("#shi").change(function(){ 128 FillQu(); 129 }) 130 }); 131 132 //处理页面 133 <?php 134 include("haoyou.php"); 135 $db= new haoyou(); 136 137 $pcode=$_POST["code"]; 138 $sql="select AreaCode,AreaName from chinastates where ParentAreaCode='{$pcode}'"; 139 140 echo $db->strquery($sql);