使用ajax寫的省市區三級聯動

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

該項目使用了資料庫，這裡就省了，直接把源碼寫上來了，詳細代碼到

http://download.csdn.net/detail/huangjianxiang1875/4573883

這裡下載包含資料庫

showCities.php頁面

<!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 type="text/javascript" language="javascript">
//建立ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的瀏覽器擷取對象xmlHttpRequest 對象方法不同
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
function getCities(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
var url="showCItiesPro.php"; //post
var data="provincecode="+$("sheng").value;
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回呼函數
myXmlHttpRequest.onreadystatechange=chuli;
//發送
myXmlHttpRequest.send(data);
}
}
function chuli(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
// window.alert(myXmlHttpRequest.responseXML);
//取出伺服器的資料
var cities=myXmlHttpRequest.responseXML.getElementsByTagName("message");
$("city").length=0;
var myOption=document.createElement("option");
// myOption.value=city_value;
myOption.innerText="--請選擇城市--";
$("city").appendChild(myOption);
//遍曆並取出城市
for(var i=0;i<cities.length;i++){

var city_name=cities[i].childNodes[0].childNodes[0].nodeValue;
var city_value=cities[i].childNodes[1].childNodes[0].nodeValue;
//建立新的元素option
var myOption=document.createElement("option");
myOption.value=city_value;
myOption.innerText=city_name;
$("city").appendChild(myOption);
}

}
}
}

function $(id){
return document.getElementById(id);
}

function getCounty(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
var url="showCItiesPro.php"; //post
var data="city="+$("city").value;
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回呼函數
myXmlHttpRequest.onreadystatechange=chuli1;
//發送
myXmlHttpRequest.send(data);
}
}
function chuli1(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
// window.alert(myXmlHttpRequest.responseXML);
//取出伺服器的資料
var cities=myXmlHttpRequest.responseXML.getElementsByTagName("message");

$("county").length=0;
//遍曆並取出城市
for(var i=0;i<cities.length;i++){
var city_name=cities[i].childNodes[0].childNodes[0].nodeValue;
var city_value=cities[i].childNodes[1].childNodes[0].nodeValue;
//建立新的元素option
var myOption=document.createElement("option");
myOption.value=city_value;
myOption.innerText=city_name;
$("county").appendChild(myOption);
}

}
}
}

</script>
</head>

<body>
<select id="sheng" onchange="getCities()">
<?php
$conn=mysql_connect("localhost","root","");//連結資料庫
mysql_select_db("novel");//選擇資料庫
mysql_query("set names 'utf8'");//設定字元集
$sql="select * from province";//查詢資料庫province表也就是省
$result=mysql_query($sql);//執行語句賦值給變數
?>
<option value="">---省---</option>
<?php
while($row=mysql_fetch_array($result)){
?>
<option value="<?php echo $row['code'];?>"><?php echo $row['name'];?></option>
<?php
}
?>
</select>
<select id="city" onchange="getCounty()">
<option value="">---城市---</option>
</select>
<select id="county">
<option value="">---縣城---</option>
</select>
</body>
</html>

showCitiesPro.php頁面

<?php
//這兩句話很重要，第一句話告訴瀏覽器返回的資料是xml格式
header("Content-Type:text/xml;charset=utf-8");
//告訴瀏覽器不要快取資料
header("Cache-Control:no-cache");

$provincecode=$_POST['provincecode'];
$city=$_POST['city'];
// file_put_contents("a.txt",$province."\r\n",FILE_APPEND); 調試代碼可以看到接受到的資料
$conn=mysql_connect("localhost","root","");//連結資料庫
mysql_select_db("novel");//選擇資料庫
mysql_query("set names 'utf8'");//設定字元集

$info="";

if($provincecode!=""){
$sql="select * from city where provincecode=$provincecode";//查詢資料庫province表也就是省
$result=mysql_query($sql);//執行語句賦值給變數
$info.="<province>";
while($row=mysql_fetch_array($result)){
$info.="<message><city>{$row[name]}</city><city>{$row[code]}</city></message>";
}
$info.="</province>";
}else if($city!=""){
$sql="select * from area where citycode=$city";//查詢資料庫province表也就是省
$result=mysql_query($sql);//執行語句賦值給變數
$info.="<province>";
while($row=mysql_fetch_array($result)){
$info.="<message><county>{$row[name]}</county><county>{$row[code]}</county></message>";
}
$info.="</province>";
}

//file_put_contents("a.txt",$info."\r\n",FILE_APPEND);
echo $info;
?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More