题目要求：
要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。
实现技术：php ajax
实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。
使用chinastates表查询
<!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" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>三级联动</h1>
<select id="sheng"></select>
<select id="shi"></select>
<select id="qu"></select>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
sheng();
shi();
qu();
$("#sheng").change(function(){
shi();
qu();
});
$("#shi").change(function(){
qu();
});
});
function sheng() {
var areacode = "0001";
$.ajax({
async:false,
url: "liandongjiazai.php",
data: {areacode: areacode},
type: "POST",
dataType: "TEXT",
success: function (data) {
var str = "";
var hang = data.split("|");
for (var i = 0; i < hang.length; i++) {
var lie = hang[i].split("^");
str = str + "<option value='"+lie[0]+"'>" + lie[1] + "</option>";
}
$("#sheng").html(str);
}
});
}
function shi() {
var areacode = $("#sheng").val();
$.ajax({
async:false,
url:"liandongjiazai.php",
data:{areacode:areacode},
type:"POST",
dataType:"TEXT",
success: function(data){
var str = "";
var hang = data.split("|");
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
function qu() {
var areacode = $("#shi").val();
$.ajax({
url:"liandongjiazai.php",
data:{areacode:areacode},
type:"POST",
dataType:"TEXT",
success: function(data){
var str = "";
var hang = data.split("|");
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
});
}
</script>
</html>
联动处理页面
<?php
$areacode = $_POST["areacode"];
include("LZY.class.php");
$db= new LZY();
$sql = "select * from chinastates WHERE parentareacode='{$areacode}' ";
$arr = $db->Query($sql);
$str = "";
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|";
}
$str = substr($str,0,strlen($str)-1);
echo $str;
当然，我们也可以用 dataType:"json",方法，为了以后便于使用可以将三级联动做成jQuery插件，这样，变方便了使用。
首先，我们先做出主页面的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" /> <title>无标题文档</title> <script src="../../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> </head> <body> <div id="sanji"></div> </body> </html>
然后就是我们封装的js插件了
// JavaScript Document
// JavaScript Document
$(document).ready(function(e) {
//加载三个下拉列表
$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
//加载显示数据
//加载省份
FillSheng();
//加载市
FillShi();
//加载区
FillQu();
//当省份选中变化，重新加载市和区
$("#sheng").change(function(){
//加载市
FillShi();
//加载区
FillQu();
})
//当市选中变化的时候，重新加载区
$("#shi").change(function(){
//加载区
FillQu();
})
});
//加载省份信息
function FillSheng()
{
//取父级代号
var pcode = "0001";
//根据父级代号查数据
$.ajax({
async:false,
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success:function(data){
var str = "";
for(var sj in data)
{
str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";
}
$("#sheng").html(str);
}
});
}
//加载市信息
function FillShi()
{
//取父级代号
var pcode = $("#sheng").val();
//根据父级代号查数据
$.ajax({
async:false,
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success:function(data){
var str = "";
for(var sj in data)
{
str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";
}
$("#shi").html(str);
}
});
}
//加载区信息
function FillQu()
{
//取父级代号
var pcode = $("#shi").val();
//根据父级代号查数据
$.ajax({
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success:function(data){
var str = "";
for(var sj in data)
{
str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";
}
$("#qu").html(str);
}
});
}
最后是
<?php
$pcode = $_POST["pcode"];
include("../../LZY.class.php");
$db = new LZY();
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->JsonQuery($sql);
如果有需要封装类可以留言