javascript的省市县乡村街道ajax联动

这个例子我我看到别人的网站这个功能很不错，基于php的javascript的省市县乡村街道ajax联动，自己把他的源代码拷贝了一下，加上自己的修改是一个很不错的功能保留下了。

ajax方式的省市县乡村街道有一个很明显的优势就是：如果一次加载的话省市县乡村街道全国的数据会非常大，具体多大你可以试试你的浏览器上万行会不会卡？而ajax方式就可以很好的避免这个问题。

在我们遇到的这个项目中，由于数据量巨大不可能用传统的一次加载的方式，幸好这个ajax方式的联动效果非常好，于是www.blogguy.cn就收藏了，各位朋友免费用，转载请注明一下来源是www.blogguy.cn。

废话少说，直接看javascript代码先：

JavaScript代码

<script language="javascript">
var xmlHttp; //定义一个全局变量
//主函数，用于层和图标的样式及执行AJAX
function changeselect(id,rid,url)
{
GetId(id).style.display='';
ShowChild(id,rid,url);
}
//创建XMLHttpRequest对象
function CreateXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlHttp = new XMLHttpRequest();
}
}
//Ajax处理函数
function ShowChild(id,rid,url)
{
CreateXMLHttpRequest();
if(xmlHttp)
{
xmlHttp.open('POST',url,true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var SendData = 'pid='+rid;
xmlHttp.send(SendData);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
GetId(id).innerHTML = xmlHttp.responseText;
}
else
{
GetId(id).innerHTML='出错：'+xmlHttp.statusText;
}
}
else
{
GetId(id).innerHTML="正在提交数据...";
}
}
}
else
{
GetId(id).innerHTML='抱歉，您的浏览器不支持XMLHttpRequest，请使用IE6以上版本！';
}
}
//取得页面对象
function GetId(id)
{
return document.getElementById(id);
}
//www.blogguy.cn的页面效果控制函数
function EditHousehold(){
if(document.getElementById("isEditHousehold").checked==true)
{
document.getElementById("newCurrentHousehold").className="displayblock";
} else{
document.getElementById("newCurrentHousehold").className="displaynone";
}
}
</script>

下面这段是www.blogguy.cn的html+php的混合代码，不太规范，凡是效果是一目了然。简单解释一下就是：如果数据库中已经有记录了就显示是否修改选项，如果如果勾选了修改，那就显示地区选项出来；如果数据库中没有记录，就直接显示地区选项。

PHP代码

<?php
if($realname!=""){
//数据库中以及有数据
$sql = "SELECT * FROM www.blogguy.cn_area where id=$provinceid";;
$query = $_SGLOBAL['db']->query($sql);
$row = $_SGLOBAL['db']->fetch_array($query);
$provincename = $row['name'];
$sql = "SELECT * FROM www.blogguy.cn_area where id=$cityid";;
$query = $_SGLOBAL['db']->query($sql);
$row = $_SGLOBAL['db']->fetch_array($query);
$cityname = $row['name'];
$sql = "SELECT * FROM www.blogguy.cn_area where id=$countyid";;
$query = $_SGLOBAL['db']->query($sql);
$row = $_SGLOBAL['db']->fetch_array($query);
$countyname = $row['name'];
echo("<span id='CurrentHousehold' class=''>当前户口所在地：$provincename - $cityname - $countyname</span>");
?>
<input type="checkbox" name="isEditHousehold" id="isEditHousehold" value="0" onclick="javascript:EditHousehold();">我要修改
<div id='newCurrentHousehold' class='displaynone'>
<select name="province" onchange="changeselect('cityID',this.value,'http://www.blogguy.cn/include/area.php?type=1&level=2');">
<option value="">-选择省份-</option>
<?php
$sql = "SELECT * FROM www.blogguy.cn_area where parentid=0";;
$query = $_SGLOBAL['db']->query($sql);
while ($row = $_SGLOBAL['db']->fetch_array($query))
{
echo("<option value=\"".$row["id"]."\">".$row["name"]."</option>");
}
?>
</select>
<span id="cityID"></span>
</div>
<?php }else{?>
<select name="province" id="province" onchange="changeselect('cityID',this.value,'http://www.blogguy.cn/include/area.php?type=1&level=2');">
<option value="">-选择省份-</option>
<?php
$sql = "SELECT * FROM www.blogguy.cn_area where parentid=0";;
$query = $_SGLOBAL['db']->query($sql);
while ($row = $_SGLOBAL['db']->fetch_array($query))
{
echo("<option value=\"".$row["id"]."\">".$row["name"]."</option>");
}
?>
</select>
<span id="cityID"></span>
<font color="#FF0000">*</font>
<?php }?>

然后是服务器端的php脚本，也就是http://www.blogguy.cn/include/area.php这个文件该如何写的问题，这个文件要考虑到是否存在下个等级，如果存在下一个分类等级的话，那么要加一个类似于onchange=\"changeselect('countyID',this.value,'http://www.blogguy.cn/include/area.php?type=1&level=3');的函数，然后需要一个id是'countyID'的div或者span，用于放置下一季对象。

给一个www.blogguy.cn的简单的代码。下面的代码是我为了方便演示使用的mysql数据库，在实际项目中我都是直接生成数据保存到文件中，直接读取文件的，这里仅仅是一个演示，就不做文件中读取操作了。

PHP代码

if($pid!=""&$type==1&$level==2){
$return="<select name=\"city\" id=\"city\" onchange=\"changeselect('countyID',this.value,'http://www.blogguy.cn/include/area.php?type=1&level=3');\">";
$return.="<option value=\"\">-请选择-</option>";
$sql = "SELECT * FROM www.blogguy.cn_area where parentid=$pid";;
$query = $_SGLOBAL['db']->query($sql);
while ($row = $_SGLOBAL['db']->fetch_array($query))
{
$return.="<option value=\"".$row["id"]."\">".$row["name"]."</option>";
}
$return.="</select>";
$return.="<span id=\"countyID\"></span>";
echo iconv("gbk", "UTF-8", $return);
}
if($pid!=""&$type==1&$level==3){
$return="<select name=\"county\" id=\"county\">";
$sql = "SELECT * FROM www.blogguy.cn_area where parentid=$pid";;
$query = $_SGLOBAL['db']->query($sql);
if($_SGLOBAL['db']->num_rows($query)<1){
$sql = "SELECT * FROM job_area where id=$pid";;
$query = $_SGLOBAL['db']->query($sql);
while ($row = $_SGLOBAL['db']->fetch_array($query))
{
$return.="<option value=\"".$row["id"]."\">".$row["name"]."</option>";
}
}else{
$return.="<option value=\"\">-请选择-</option>";
while ($row = $_SGLOBAL['db']->fetch_array($query))
{
$return.="<option value=\"".$row["id"]."\">".$row["name"]."</option>";
}
}
$return.="</select>";
echo iconv("gbk", "UTF-8", $return);
}

现在你应该可以看到想要的结果了，是不是挺好的呢？你可能好想问我如何通过javascript来判断用户是不是有选择呢？或者用户选择的数据是不是完整呢？其实很简单，看下面的javascript代码，判断用户是否有选择地区。

JavaScript代码

if (document.getElementsByName("isEditHousehold").length!=0) {
if(document.getElementById("isEditHousehold").checked==true){
if(document.getElementsByName("county").length==0||document.getElementById("county").value==""){
alert("地址不能为空！");
return false;
}
}
}else{
if(document.getElementsByName("county").length==0||document.getElementById("county").value==""){
alert("地址不能为空！");
return false;
}
}