省市縣三級關聯是web開發中常用的功能，網上有很多實作的方法，筆者在這也提供一中ajax實作的方法(背景php處理)。
html代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>省市縣</title>
<style>
.box {
margin-left:20px;
margin-top: 20px;
width: 300px;
height: 200px;
border: 1px dashed black;
}
h2 {
text-align: center;
}
span {
font-size:20px;
width: 66px;
height: 30px;
margin-left: 20px;
display: inline-block;
}
select {
width: 100px;
height: 30px;
font-size:16px;
}
.sub {
margin-left: 200px;
margin-top: 5px;
width: 70px;
height: 30px;
font-size:20px;
line-height: 20px;
background-color: rgb(49, 159, 229);
color: white;
border-radius: 3px;
border: none;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div class='box'>
<h2>省市縣/區三級關聯</h2>
<form id="pcc" action="action.php" method="POST">
<span>省 :</span>
<select id="pro" name="pro">
</select><br/>
<span>市 :</span>
<select id="city" name="city">
</select><br/>
<span>縣/區:</span>
<select id="county" name="county">
</select><br/>
<input class="sub" type="submit" value="送出" >
</form>
</div>
<script>
$(function(){
$.ajax({
type:"POST",
cache:false,
url:"pcc.php",
data:{"pid":0},
dataType:"json",
success:function(data){
var option='<option>--請選擇--</option>';
$.each(data,function(i,n){
option += '<option value="'+n.id+'">'+n.areaname+'</option>';
})
$("#pro").append(option);
}
});
$("#pro").change(function(){
var pid=$(this).val();
$.ajax({
type:"POST",
cache:false,
url:"pcc.php",
data:{"pid":pid},
dataType:"json",
success:function(data){
//追加本級option前，先清除city和county的option，以免重選時幹擾
$("#city option").remove();
$("#county option").remove();
var option='<option>--請選擇--</option>';
$.each(data,function(i,n){
option += '<option value="'+n.id+'">'+n.areaname+'</option>';
})
$("#city").append(option);
}
});
});
$("#city").change(function(){
var pid=$(this).val();
$.ajax({
type:"POST",
cache:false,
url:"pcc.php",
data:{"pid":pid},
dataType:"json",
success:function(data){
//同上
$("#county option").remove();
var option='<option>--請選擇--</option>';
$.each(data,function(i,n){
option += '<option value="'+n.id+'">'+n.areaname+'</option>';
})
$("#county").append(option);
}
});
});
})
</script>
</body>
</html>
- 本方法需要用到jquery，請自行下載下傳
如上所示，本文将選項都放在ajax請求裡，ajax請求每次提供pid(初始值為0,即頂級id),傳回兩個參數，本級id和父級pid;通過chang事件追加需要提供的<option>
。<option>
php代碼如下：
pcc.php
<?php
require("mysqldb.php");
$mydb=new MysqliDB();
$pid=$_POST['pid'];
$sql="select * from cn_area where parentid=$pid;";
// echo $sql;exit;
$datas=$mydb->select($sql);
echo json_encode($datas);
mysqldb.php:
<?php
class MysqliDB {
private $conn;
function __construct(){
$conn=mysqli_connect('127.0.0.1','root','*****','test');
if(!$conn){
die("連接配接失敗".mysqli_connect_error());
}
mysqli_query($conn,'set names utf8');
$this->conn=$conn;
}
function select($sql) {
$result=mysqli_query($this->conn,$sql);
$data=array();
// var_dump($result);exit;
while( $arr=mysqli_fetch_assoc($result) ){
$data[]=$arr;
}
return $data;
}
function close() {
mysqli_close($this->conn);
}
action.php
<?php
require("mysqldb.php");
$mydb=new MysqliDB();
//print_r($_POST);exit;
$sql="select * from cn_area where id IN(".$_POST['pro'].",".$_POST['city'].",".$_POST['county'].");";
// echo $sql;exit;
$datas=$mydb->select($sql);
// echo "<pre>";
// print_r($datas);exit;
$addr="";
foreach( $datas as $v){
$addr .= $v['areaname'];
}
echo "您選則的位址為：".$addr."<br/>";
echo "<a href='' onclick='window.history.back();'>點選傳回</a>"
- 省市縣區劃表SQL檔案：連結：http://pan.baidu.com/s/1boGHJfL 密碼：1vvu
![Centos 7 Apache配置虛拟主機[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)