area.html
<!DOCTYPE HTML>
<html>
<head>
<title> ajax </title>
<meta charset="utf-8"/>
<script type="text/javascript">
var httpAjax = new XMLHttpRequest();
function $(id){
return document.getElementById(id);
}
// 獲取省
function getProvince(){
httpAjax.onreadystatechange=function(){
if(httpAjax.readyState == 4 && httpAjax.status == 200){
var res = httpAjax.responseText;
res = eval("("+res+")");
var _html = "<option value=\"\">請選擇...</option>";
for(var i in res){
_html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
}
$("province").innerHTML = _html;
}
}
httpAjax.open("post","area.php",false);
httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
httpAjax.send("");
}
// 加載完畢 設置選擇省
window.onload=function(){
getProvince();
}
// 獲取市
function getCity(pid){
if(pid == ""){
alert(1);
$("city").innerHTML = "<option value=\"\">請選擇...</option>";
$("county").innerHTML = "<option value=\"\">請選擇...</option>";
return false;
}
$("county").innerHTML = "<option value=\"\">請選擇...</option>";
httpAjax.onreadystatechange=function(){
if(httpAjax.readyState == 4 && httpAjax.status == 200){
var res = httpAjax.responseText;
res = eval("("+res+")");
var _html = "<option value=\"\">請選擇...</option>";
for(var i in res){
_html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
}
$("city").innerHTML = _html;
}
}
httpAjax.open("post","area.php",false);
httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
var data = "id="+pid;
httpAjax.send(data);
}
// 獲取區縣市
function getCounty(cid){
if(cid == ""){
$("county").innerHTML = "<option value=\"\">請選擇...</option>";
return false;
}
httpAjax.onreadystatechange=function(){
if(httpAjax.readyState == 4 && httpAjax.status == 200){
var res = httpAjax.responseText;
res = eval("("+res+")");
var _html = "<option value=\"\">請選擇...</option>";
for(var i in res){
_html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
}
$("county").innerHTML = _html;
}
}
httpAjax.open("post","area.php",false);
httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
var data = "id="+cid;
httpAjax.send(data);
}
</script>
</head>
<body style="padding:200px;">
<select id="province" onchange="getCity(this.value)">
<option value="">請選擇...</option>
</select>省
<select id="city" onchange="getCounty(this.value)">
<option value="">請選擇...</option>
</select>市
<select id="county">
<option value="">請選擇...</option>
</select>縣/市/區
</body>
</html>area.php
<?php
$pdo = new PDO("mysql:host=localhost;dbname=tk106","root","admin");
$pdo->exec("set names utf8");
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : "0";
$sql = "select * from area where parentid=".$id;
$data = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);
?>