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="../jquery-1.11.2.min.js"></script>
7
8 <!--三级联动是ajac来实现-->
9 </head>
10 <body>
11 <div id="sanji"></div><!--三个下拉列表--><!--把div放在这是因为，以后可以拿到别的地方使用，这就是就是一个JS的插件-->
12
13 </body>
14 <script type="text/javascript">
15
16 $(document).ready(function(e) {
17 //要实现三级联动，需要三个下拉列表，怎样实现？？？？？
18
19 //定义一个字符串， 写三个下拉<select> ,第一个下拉是存放省的，第二个下拉是存放市的，第三个是存放的区的
20 var zhuti="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
21 // aler(zhuti);
22
23 //做了三个< select>，把这三个< select> 放到 <div id="sanji"></div>里
24 //怎么放？？
25 //根据ID，找到DIV"#sanji"
26 $("#sanji").html(zhuti);
27 //把三个下拉放到的DIV里,div<div id="sanji"></div>里有三个下拉了
28 //页面在加载时，把这三个select放到DIV里，第一个select里要填充内容，省填充完之后，要填充市，市填充完之后,在填充区。
29
30 //填充省 下拉，先要做成一个方法
31 FillSheng(); //调用这个方法就可以填充上
32 //填充市 下拉
33 FillShi(); //执行这个方法就把市填充上了
34 //填充区 下拉
35 FillQu(); //
36
37 //页面在加载时，先把这三个下拉都填上值
38 //当省选中项变化的时候,市和区要跟这变
39
40 //要给省的下拉，加一个事件
41 //根据id找到省，加一个事件，加一个.change()事件
42 $("#Sheng").change(function(){ //当省选中变化的时候去填充市和区，当省选中变化的时候,后面的市和区都跟这变，跟着变的话，这调用FillShi()方法和FillQu()方法，就可以了
43 //当省选中项变化的时候，再重新填充，市和区，
44 //填充市
45 FillShi();
46 //填充区
47 FillQu();
48
49 })
50
51 //当市选中变化时候去填充区，因为区要跟着市变化，所以这个位置，给谁加事件？？？给市shi的下拉加一个.change()事件，这里面写填充区的代码
52 $("#Shi").change(function(){
53 //填充区
54 FillQu();
55
56 })
57
58
59 });
60
61 //把三个方法写好之后，就可以了
62
63
64 //填充省的方法
65 //如何从表中查到所有的省，每一个省的负级代号都是一样的，都是属于中国的，每一个省的负级代号都是0001，根据0001来查询，就可以查到所有省的信息
66 function FillSheng()
67
68 { //省的父极代号
69 var pcode = "0001";//定义的变量，pcode是负极代号。所有省的负极代号都是0001
70 //根据负级代号查到所有的省
71 //调.ajax 查
72 //aler(pcode);
73 $.ajax({
74
75 url:"chili.php",
76 date:{pcode:pcode},
77 type:"POST",
78 dataType:"TEXT",
79 success: function(data){ //success: 回调函数 返回值是data
80 //aler(data);
81 <!--返回的是字符串，需要对字符串进行处理-->
82 //拆分返回的字符串，得到行的数组
83 var hang = data.trim().split("|"); //返回hang的数组
84 // Trim()删除字符串首尾的空白（可以首尾一起，也可以指定首或尾，取决于控制参数），但会保留字符串内部作为词与词之间分隔的空格。
85 //split（）拆分。本函数可将字符串依指定的规则分开。先根据行与行之间的分割，过来拆。
86 //拆完之后，会返回一个行的数组。变量hang var hang来接收。
87 //这个行的数组里面每一项都存了，一个字符串，拆分每一行，需要先取到，字符串，取到字符串就要用循环
88 var str = "" ;//拼一个字符串，默认是空的
89 for(var i=0;i<hang.length;i++)
90 {
91 //返回列的数组
92 var lie = hang[i].split("^");///通过hang取索引i，能够取到这一行里的字符串，这个字符串的每一列之间用哪一个符号分割了。
93 //在根据列与列之间的分割符，过来拆一下，列于列之间是用，"^"分割的
94 //在这个循环里，每循环一次，就可以造一个<option>，然后拼到上面
95 str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";//再往后拼上一个，字符串（<option></option>），<option>里面要显示，省份的信息，要显示省的名称应是索引为1的"+lie[1]+",能够取到名称
96 }
97
98 $("#sheng").html(str);
99
100
101 }
102
103 });
104
105
106 }
107
108
109
110
111 </script>
112 </html>
处理页面-------"chili.php"
1 <?php 2 3 include("DBDA.php"); 4 //造对象 5 $db=new DBDA(); 6 //传过来一个负级代号，所以这个页面，需要接收这个负级代号 7 //负级代号，存在$_POST的数组里，找到pcode的存起来$pcode 8 $pcode=$_POST["pcode"];//接收负级代号 9 //根据负级代号查询 ParentAreaCode是负级代号 传过来的负级代号是$pcode 10 $sql="select * from chinastates where ParentAreaCode='{$pcode}'"; 11 //根据这条语句，能够根据负级代号，查到所有的省会信息，查到所有的省会信息之后执行 12 echo $db->StrQuery($sql);//返回字符串，就包含了所有的信息 13 //这个页面就是，给你一个负级代号，就查出子级区域，然后用字符串返回 14 15 16 ?>
