还剩余部分未写完，后面的可以自行完成。未进行数据库连接，有需要的自行连接数据库的操作。
参考代码：
showCity.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>城市联动效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> //创建ajax引擎 function getXMLHttpRequest(){ var xmlHttp; if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //window.alert("IE"); }else{ xmlHttp=new XMLHttpRequest(); } return xmlHttp; } //sendRequest var xmlHttpRequest; function sendRequest(){ //得到xmlHttpRequest 对象 xmlHttpRequest=getXMLHttpRequest(); var url="/ajax/cityList.php"; var data="province="+$('sheng').value; //window.alert(data); xmlHttpRequest.open("post",url,true); //post方式提交需要加入这句 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //回调函数 xmlHttpRequest.onreadystatechange=function chuli(){ if(xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status=="200"){ //取出结果 var citys=xmlHttpRequest.responseXML.getElementsByTagName("city"); $('city').length=0; var myoption=document.createElement("option"); myoption.innerText="--城市--"; $('city').appendChild(myoption); //window.alert(citys.length); //遍历 for(var i=0;i<citys.length;i++){ //window.alert(citys[i].childNodes[0].nodeValue); var city_name=citys[i].childNodes[0].nodeValue; //创建新元素 var myoption=document.createElement("option"); myoption.value=city_name; myoption.innerText=city_name; $("city").appendChild(myoption); } } } } //发送数据 xmlHttpRequest.send(data); } function $(id){ return document.getElementById(id); } </script> </head> <body> <select id="sheng" onchange="sendRequest();"> <option value="">---省---</option> <option value="hunan">湖南</option> <option value="jiangsu" >江苏</option> </select> <select id="city"> <option value="">--城市--</option> </select> <select id="county"> <option value="">--县城--</option> </select> </body> </html>
cityList.php
<?php //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 header("Content-Type: text/xml;charset=utf-8"); //告诉浏览器不要缓存数据 header("Cache-Control: no-cache"); //接收 $province=$_POST['province']; //调试 file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND); $result=""; if($province=="hunan"){ $result="<province><city>长沙</city><city>岳阳</city><city>衡阳</city></province>"; }else if($province=="jiangsu"){ $result="<province><city>南京</city><city>盐城</city><city>苏州</city></province>"; } echo $result; ?>
效果图
