该项目使用了数据库,这里就省了,直接把源码写上来了,详细代码到
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" οnchange="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" οnchange="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;
?>