1,php代码
01.con.php
<?php
define("HOST",'localhost');
define("USER",'root');
define("PWD",'root');
define("DBNAME",'liandong');
02.mysqli.php
<?php
include 'conn.inc.php';
$mysqli = new mysqli(HOST,USER,PWD,DBNAME);
$program_char = "utf8" ;
mysqli_set_charset( $mysqli , $program_char );
if($mysqli->connect_errno){
die('数据库链接出错'.$mysqli->connect_error);
03.request.php
<?php
header("Content-Type:text/html;charset=utf-8");include './mysqli.php';
$type = isset($_GET["type"]) ? $_GET["type"] : "";
$parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";
// 链接数据库
if ($type == "" || $parent_id == "") {
exit(json_encode(array("flag" => false, "msg" => "查询类型错误")));
} else {
// 链接数据库
$sql = "select * from global_region where parent_id = $parent_id AND region_type = $type";
// echo $sql;die;
$result = $mysqli->query($sql);
if($result->num_rows>0)
{
$arr=[];
while ($row = $result->fetch_assoc())
{
$arr[$row["region_id"]]["region_id"] = $row["region_id"];//$arr[1]["title"]=$row["title"]
$arr[$row["region_id"]]["region_name"] = $row["region_name"];//$arr[1]["content"]=$arr["content"]
}
}
// $a = array('1'=>array('a1'=>1,'a2'=>2),'2'=>array('b1'=>'b1','b2'=>'b2'));
// var_dump($arr);
// var_dump($a);
$provinces_json = json_encode($arr);
echo $provinces_json;die;
}
?>
2.html代码
<!DOCTYPE html>
<html>
<head>
<title>PHP+Ajax+Mysql省市县三级联动</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="./jquery.min.js" type="text/javascript"></script>
</head>
<style>
select{height: 30px;}
</style>
<body>
<h1 align="center">PHP+Ajax+Mysql省市县三级联动</h1>
<table align="center" border="1" cellpadding="3" cellspacing="0" width="30%">
<tr>
<th>省份</th>
<th>市</th>
<th>县</th>
</tr>
<tr>
<th>
<select id="provinces" disabled>
<option value="">请选择省份</option>
</select>
</th>
<th>
<select id="citys" disabled>
<option value="">请选择市</option>
</select>
</th>
<th>
<select id="countys" disabled>
<option value="">请选择县</option>
</select><br>
</th>
</tr>
</table>
<h4>
<div align="center" id="region"></div></th>
</h4>
</body>
<script type="text/javascript">
$(document).ready(function() {
//console.log('123');
// 加载所有的省份
$.ajax({
type: "get",
url: "request.php", // type=1表示查询省份
data: {"parent_id": "1", "type": "1"},
dataType: "json",
success: function(data) {
$("#provinces").html("<option value=''>请选择省份</option>");
$.each(data, function(i, item) {
// alert(item.region_id);
$("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
$('#provinces').eq(0).removeAttr('disabled');
}
});
$("#provinces").change(function() {
$.ajax({
type: "get",
url: "request.php", // type =2表示查询市
data: {"parent_id": $(this).val(), "type": "2"},
dataType: "json",
success: function(data) {
$("#citys").html("<option value=''>请选择市</option>");
$.each(data, function(i, item) {
$("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
$('#citys').removeAttr('disabled');
}
});
});
$("#citys").change(function() {
$.ajax({
type: "get",
url: "request.php", // type =2表示查询市
data: {"parent_id": $(this).val(), "type": "3"},
dataType: "json",
success: function(data) {
$("#countys").html("<option value=''>请选择县</option>");
$.each(data, function(i, item) {
$("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
$('#countys').removeAttr('disabled');
}
});
});
//显示地址
$("#countys").change(function() {
var value = $("#provinces").find("option:selected").text()
+ $("#citys").find("option:selected").text()
+ $("#countys").find("option:selected").text();
// alert(value);
$("#region").append("选择的地址是:"+"<input value='" + value + "'>");
});
});
</script>
</html>
3.自己下载jquery.min.js
4.效果图
