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 });
时间： 2024-08-04 14:13:48