AJAX实现省市联动

来源：互联网发布：mac桌面图标删除不掉编辑：程序博客网时间：2024/04/30 10:41

province.php

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>select province and city</title><script type="text/javascript" src="ajax.js"></script><script type="text/javascript">function $(id){return document.getElementById(id);}function getCity(){var http_request=createAjax();var url="/ajax/province_do.php";var data="province="+$("province").value;http_request.onreadystatechange=process;http_request.open("post",url,true);http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");http_request.send(data);function process(){if(http_request.readyState==4 && http_request.status==200){var city=http_request.responseXML.getElementsByTagName("city");$("city").length=0;var myoption=document.createElement("option");myoption.innerText="---市---";$("city").appendChild(myoption);for(var i=0;i<city.length;i++){var cityList=city[i].childNodes[0].nodeValue;var myoption=document.createElement("option");myoption.value=cityList;myoption.innerText=cityList;$("city").appendChild(myoption)}}}}</script></head><body><form><select id="province" onchange="getCity();"><option value="">---省---</option><option value="zhejiang">浙江</option><option value="shaanxi">陕西</option></select><select id="city"><option value="">---市---</option></select><select id="country"><option value="">---县---</option></select></form></body></html>

province_do.php

<?phpheader("Content-Type:text/xml;charset=utf-8");header("Cache-Control:no-cache");$province=$_POST['province'];$cityinfo="";if ($province=="zhejiang"){$cityinfo="<province><city>杭州</city><city>金华</city><city>台州</city></province>";}elseif ($province=="shaanxi"){$cityinfo="<province><city>汉中</city><city>安康</city><city>商洛</city></province>";}echo $cityinfo;?>