两种方式实现省市县三级联动（利用解析文本和json方式）
第一种：
ajax-text-select.html
<!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 language="javascript" type="text/javascript" src="../../include/ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
var objectId="";
function getArea(id,objid){
objectId=objid;
var url="ajax-text-select-server.php";
var params="id="+id;
get(url,params,processData);
}
function processData(xhr){
var str=xhr.responseText;
var selobj=$$(objectId);
selobj.options.length=0
//第一步，使用","拆解，确定选项个数
var optarr=str.split(";");
//每一个元素id:name
for(var i=0;i<optarr.length;i++){
//拆解的第二步，使用：进行拆分，[0]===id [i]==name
var optstr=optarr[i].split(":");
//添加到下拉菜单中
var op=new Option(optstr[1],optstr[0]);
selobj.options.add(op);
}
}
ajax-text-select-server.php
<?php
header("Content-Type:text/html;charset=utf-8");
include_once "../../include/dbConn.php";
$id=$_GET['id'];
$sql="select id,name from area where id like '".$id."__'";
$rs=mysql_query($sql);
//要封装的格式
$str="0:=请选择=";
while($rows=mysql_fetch_assoc($rs)){
$str.=";".$rows['id'].":".$rows['name'];
}
echo $str;
?>
</script>
</head>
<body onload="getArea('','sheng')">
解析文本实现多级联动效果
<div style="border:#3F0 dashed 1px;" id="div1">
<select id="sheng" onchange="getArea(this.value,'shi')"></select>省
<select id="shi" onchange="getArea(this.value,'xian')"></select>市
<select id="xian"></select>县
</div>
</body>
</html>
第二种：
Json-area.html
<!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>json实现多级联动效果</title>
<script language="javascript" type="text/javascript" src="../../include/ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
var objectId="";
function getArea(id,objid){
objectId=objid;
var url="ajax-json-select-server.php";
var params="id="+id;
get(url,params,processData);
}
function processData(xhr){
var str=xhr.responseText;
var obj=eval("("+xhr.responseText+")");
var selobj=$$(objectId);
selobj.options.length=0
//第一步，使用","拆解，确定选项个数
var op1=new Option("=请选择=",0);
selobj.options.add(op1);
//每一个元素id:name
for(var i=0;i<obj.length;i++){
//添加到下拉菜单中
var op=new Option(obj[i].name,obj[i].id);
selobj.options.add(op);
}
}
</script>
</head>
<body onload="getArea('','sheng')">
json文本实现多级联动效果
<div style="border:#3F0 dashed 1px;" id="div1">
<select id="sheng" onchange="getArea(this.value,'shi')"></select>省
<select id="shi" onchange="getArea(this.value,'xian')"></select>市
<select id="xian"></select>县
</div>
</body>
</html>
ajax-json-select-server.php
<?php
header("Content-Type:text/html;charset=utf-8");
include_once "../../include/dbConn.php";
$id=$_GET['id'];
$sql="select id,name from area where id like '".$id."__'";
$rs=mysql_query($sql);
//要封装的格式
while($rows=mysql_fetch_assoc($rs)){
$arr[]=$rows;
}
echo json_encode($arr);
?>
ajaxUtil.js文件
function get(url1,params,methodName){
/*
ajax使用的基本步骤：
1、初始化ajax引擎
2、封装url（设定要请求的路径）
3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）
4、将要请求的信息通过引擎发送到服务器进行处理
5、监听服务器返回给ajax引擎的处理状态
6、判断是否交互完毕，如果交互完毕则取出返回的数
*/
//初始化ajax引擎
var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。
var url=url1+"?"+params+"&r="+Math.random();
//alert(url);
//打开引擎
xhr.open("get",url,true); //readyState=1
//发送请求
xhr.send(null); //readyState=2
//监听readyState值的改变，每次改变都会执行下面额函数
xhr.onreadystatechange=function (){
//如果等于4，表明交互完毕 ，我们可以取出服务器返回的内容
if(xhr.readyState==4){
//动态调用方法，为什么说是动态呢？方法的名称是个变量methodName
methodName(xhr);
}
}
}
//$$（）方法用于方便取出 id="id" 的对象
function $$(id){
return document.getElementById(id);
}