利用ajax实现页面地区选择三级联动 效果图如下
当选择相应省份时，对应显示出所有相关城市和地区的下拉选择
来看下如何实现的
html页面部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> <title>无标题文档</title> </head> <body> <h1>三级联动</h1> <div id="sanji"></div> </body> </html>
JS部分
1 // JavaScript Document
2 $(document).ready(function(e) {
3 //找到ID=SANJI的DIV，造三个下拉扔进去
4 $("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");
5
6 //加载省的数据
7 LoadSheng();
8 //加载市的数据
9 LoadShi();
10 //加载区的数据
11 LoadQu();
12
13 //给省的下拉加点击事件
14 $("#sheng").click(function(){
15 //重新加载市
16 LoadShi();
17 //重新加载区
18 LoadQu();
19 })
20 //给市的下拉加点击事件
21 $("#shi").click(function(){
22 //重新加载区
23 LoadQu();
24 })
25
26 });
27 //加载省份的方法
28 function LoadSheng()
29 {
30 //省的父级代号
31 var pcode = "0001";
32 $.ajax({
33 async:false,
34 url:"chuli.php",
35 data:{pcode:pcode},
36 type:"POST",
37 dataType:"TEXT",
38 success: function(data){
39 var hang = data.trim().split("|");
40 var str = "";
41 for(var i=0;i<hang.length;i++)
42 {
43 var lie = hang[i].split("^");
44 str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
45 }
46 $("#sheng").html(str);
47 }
48 });
49 }
50 //加载市的方法
51 function LoadShi()
52 {
53 //找市的父级代号
54 var pcode = $("#sheng").val();
55 $.ajax({
56 async:false,
57 url:"chuli.php",
58 data:{pcode:pcode},
59 type:"POST",
60 dataType:"TEXT",
61 success: function(data){
62 var hang = data.trim().split("|");
63 var str = "";
64 for(var i=0;i<hang.length;i++)
65 {
66 var lie = hang[i].split("^");
67 str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
68 }
69 $("#shi").html(str);
70 }
71 });
72 }
73
74 //加载区的方法
75 function LoadQu()
76 {
77 //找区的父级代号
78 var pcode = $("#shi").val();
79 $.ajax({
80 url:"chuli.php",
81 data:{pcode:pcode},
82 type:"POST",
83 dataType:"TEXT",
84 success: function(data){
85 var hang = data.trim().split("|");
86 var str = "";
87 for(var i=0;i<hang.length;i++)
88 {
89 var lie = hang[i].split("^");
90 str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
91 }
92 $("#qu").html(str);
93 }
94 });
95 }
php数据处理页面
1 <?php
2 require "../DataBase.class.php";
3 $db= new DateBase();
4 $parentid=$_POST["pcode"];
5 $sql="select * from chinastates where parentareacode=‘{$pcode}‘";
6 $arr=$db->query($sql);
7 $str="";
8 foreach ($arr as $v){
9 $str.=implode("^",$v)."|";
10
11
12 }
13 $str=substr($str,0,strlen($str)-1);
14 echo $str;
15
16
17 ?>
可以将三级联动的JS文件作为一个插件，当以后需要三级联动效果时可以引入
引入方法 就是上面的HTML代码样式，将js在头信息中引入（放在引入jQuery文件之后），然后在body中写个div用来存放这个三级联动
时间： 2024-07-31 16:04:10