1、查询数据库以三级联动形式显现
时间：2021-07-01 10:21:17
帮助过：3人阅读
<!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);
1、查询数据库以三级联动形式显现
标签：
