用php和ajax写一个省市区的三级联动,实现地区的下拉选择

要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript;第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文件;第三个php文件就是我们所做的封装数据库类文件 

1.第一个php  JavaScript文件

<!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>
<title>无标题文档</title>
</head>
<br />
<h1>全国各地的省,市,区</h1>
<div id="sj"></div>

<body>
<script type="text/javascript">

$(document).ready(function(e) {


//在div里造下拉菜单
$("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");


//填充数据 使用Fill 关键字
FillSheng(); //填充省的数据
FillShi(); //填充市的数据
FillQu(); //填充区的数据

//填充省的方法
function FillSheng(){

var code = "0001"; //省的父级代号

$.ajax({

url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){
var hang = data.split("|");

var str = "";

for(var i=0;i<hang.length;i++){

var lie = hang[i].split("^");

str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

}
//把所有<option>放到省的下拉列表里
$("#sheng").html(str);


}


});


}


//填充市的方法
function FillShi(){

var code = $("#sheng").val(); //市的父级代号

$.ajax({

url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){

var hang = data.split("|");

var str = "";

for(var i=0;i<hang.length;i++){

var lie = hang[i].split("^");

str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

}
//把所有<option>放到市的下拉列表里
$("#shi").html(str);

}


});

 

}


//填充区的方法
function FillQu(){

var code = $("#shi").val(); //区的父级代号

$.ajax({
url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){
var hang = data.split("|");
var str = "";

for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");

str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";


}
//把所有<option>放到区的下拉列表里
$("#qu").html(str);
}

 


});

}


//当点击选择哪个省的时候,市和区一起变
$("#sheng").change(function(){
FillShi();
FillQu();

});

//当点击选择哪个市的时侯,区一起变
$("#shi").change(function(){
FillQu();


});

 

});

 

 


</script>


</body>
</html>

 


 

 

2.第二个php  处理文件

<?php
include("DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["code"];

$sql = "select AreaCode,AreaName from chinastates where ParentAreaCode = '{$pcode}'";

echo $db->StrQuery($sql);
?>

 


 

 

3.第三个php  封装数据库类文件

 

<?php
class DBDA
{
public $host="localhost";
public $uid="root";
public $pwd="root";
public $dbname="mydb";

 


public function Query($sql,$type=1)
{
$db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);
$result=$db->Query($sql);
if($type=="1")
{
return $result->fetch_all();

 

}else
{
return $result;
}
}

 


public function StrQuery($sql,$type=1)
{
$db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);
$result=$db->Query($sql);
if($type=="1")
{
$arr= $result->fetch_all();
$str="";
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|";
}
return substr($str,0,strlen($str)-1);
}else
{
return $result;
}
}
}

 


 

效果如图所示:

                                                                

 

posted @ 2017-03-13 17:22  周全264  阅读(4964)  评论(0编辑  收藏  举报