三级联动省市区练习

1 <script src="../jquery-1.11.2.min.js"></script>
2 <script src="sanjiliandong.js"></script>
3 </head>
4 <body>
5 <div id="sanji"></div>
6 </body>

处理页面

1 <?php
2 $pcode = $_POST["pcode"];
3 
4 include("DBDA.class.php");
5 $db = new DBDA();
6 
7 $sql = "select * from chinastates where parentareacode='{$pcode}'";
8 
9 echo $db->StrQuery($sql);

JS页面

 1 // JavaScript Document
 2 $(document).ready(function(e) {
 3     //往id=sanji的div里面扔三个下拉
 4     var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
 5     
 6     $("#sanji").html(str);
 7     
 8     FillSheng();
 9     FillShi();
10     FillQu();
11     
12     $("#sheng").change(function(){
13             FillShi();
14             FillQu();
15         })
16     $("#shi").change(function(){
17             FillQu();
18         })
19     
20 });
21 
22 //填充省的方法
23 function FillSheng()
24 {
25     var pcode = "0001";
26     
27     $.ajax({
28         async:false,
29         url:"sanjichuli.php",
30         data:{pcode:pcode},
31         type:"POST",
32         dataType:"TEXT",
33         success: function(data){
34                 var hang = data.split("|");
35                 var str ="";
36                 for(var i=0;i<hang.length;i++)
37                 {
38                     lie = hang[i].split("^");
39                     str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
40                 }
41                 $("#sheng").html(str);
42             }
43         
44         });
45 }
46 
47 //填充市的方法
48 function FillShi()
49 {
50     var pcode = $("#sheng").val();
51     
52     $.ajax({
53         async:false,
54         url:"sanjichuli.php",
55         data:{pcode:pcode},
56         type:"POST",
57         dataType:"TEXT",
58         success: function(data){
59                 var hang = data.split("|");
60                 var str ="";
61                 for(var i=0;i<hang.length;i++)
62                 {
63                     lie = hang[i].split("^");
64                     str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
65                 }
66                 $("#shi").html(str);
67             }
68         
69         });
70 }
71 
72 //填充区的方法
73 function FillQu()
74 {
75     var pcode = $("#shi").val();
76     
77     $.ajax({
78         async:false,
79         url:"sanjichuli.php",
80         data:{pcode:pcode},
81         type:"POST",
82         dataType:"TEXT",
83         success: function(data){
84                 var hang = data.split("|");
85                 var str ="";
86                 for(var i=0;i<hang.length;i++)
87                 {
88                     lie = hang[i].split("^");
89                     str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
90                 }
91                 $("#qu").html(str);
92             }
93         
94         });
95 }

三级联动 省市区练习

三级联动省市区练习