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