1.写一个显示页面
sanji.php
<!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><!--引入jquery文件--> <script src="sanjiliandong.js"></script><!--引入三级联动的js文件--> <title>无标题文档</title> </head> <body> <div id="sanji"></div> </body> </html>
2.纯js页面
sanjiliandong.js
// JavaScript Document
$(document).ready(function(e) {
//往id=sanji的div里面扔三个下拉
var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";//做option选项
$("#sanji").html(str);//往sanji.php文件里添加
FillSheng();//填充省
FillShi();//填充市
FillQu();//填充区
$("#sheng").change(function(){//省变化调用FillShi()和FillQu()
FillShi();
FillQu();
})
$("#shi").change(function(){//市变化调用FillQu()
FillQu();
})
});
//填充省的方法
function FillSheng()
{
var pcode = "0001";
$.ajax({
async:false,
url:"sanjichuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str ="";
for(var i=0;i<hang.length;i++)
{
lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#sheng").html(str);
}
});
}
//填充市的方法
function FillShi()
{
var pcode = $("#sheng").val();
$.ajax({
async:false,
url:"sanjichuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str ="";
for(var i=0;i<hang.length;i++)
{
lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
//填充区的方法
function FillQu()
{
var pcode = $("#shi").val();
$.ajax({
async:false,
url:"sanjichuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str ="";
for(var i=0;i<hang.length;i++)
{
lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
});
}
3.php处理页面
sanjichuli.php
<?php
$pcode = $_POST["pcode"];
include("../DBDA.class.php");
$db = new DBDA();
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);