JavaScript实现省市县三级联动效果的三种方法：
首先，两个公共文件：
dbConn.php:连接数据库
<?php
//建立数据库的连接
mysql_connect("localhost","root","");
//选择数据库
mysql_select_db("csdn_db");
//设置字符编码
mysql_query("set names utf8");
?>
ajaxUtil.js：封装的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();
//打开引擎
xhr.open("get",url,true);
//发送请求
xhr.send(null);
//监听readyState值的改变，每次改变都会执行下面额函数
xhr.onreadystatechange=function (){
//如果等于4，表明交互完毕 ，我们可以取出服务器返回的内容
if(xhr.readyState==4){
//动态调用方法，为什么说是动态呢？方法的名称是个变量methodName
methodName(xhr);
}
}
}
//$$（）方法用于方便取出 id="id" 的对象
function $$(id){
return document.getElementById(id);
}
第一种：使用DOM的innerHTML方式实现
客户端文件：
<!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>ajax+dom+php+mysql实现多级联动效果</title>
<script language="javascript" type="text/javascript" src="ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
var objectId="";
//定义函数，获取数据库的省份数据
function getArea(id,objid){
objectId=objid;
//定义url
var url="ajax-area-select-server.php";
//alert(url);
//定义参数
var params="id="+id;
//调用ajax进行交互
get(url,params,processData);
}
//处理服务器端返回的数据库，并且显示
function processData(xhr){
//得到交互的数据并且显示出来
$$(objectId).innerHTML=xhr.responseText;//alert(xhr.responseText);
}
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#00F dashed 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select> 省
<select id="shi" οnchange="getArea(this.value,'xian')"></select> 市
<select id="xian"></select> 县
</div>
</body>
</html>
服务器端文件：ajax-area-select-server.php：
<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "dbConn.php";
//获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);
//遍历查询结果，并且拼装html代码
$opstr="<option value='0'>==请选择==</option>";
while($rows=mysql_fetch_assoc($rs)){
//拼装下拉选项
$opstr.="<option value='".$rows['id']."'>".$rows['name']."</option>";
}
echo $opstr;
?>
第二种：解析普通文本的方式实现
客户端文件：
<!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="ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
var objectId="";
//定义函数，获取数据库的省份数据
function getArea(id,objid){
objectId=objid;
//定义url
var url="ajax-select-text.php";
//alert(url);
//定义参数
var params="id="+id;
//调用ajax进行交互
get(url,params,processData);
}
//处理服务器端返回的数据库，并且显示
function processData(xhr){
//解析服务器端传回的数据
var str=xhr.responseText;
//alert(str);
var selectobj=$$(objectId);
selectobj.options.length=0;
//1)使用；拆解，确定选项的个数
var optarr=str.split(";");
//alert(optarr.length);
//每个元素 id：name
for(var i=0;i<optarr.length;i++){
//2、使用：进行拆分，[0]==id [1]==name
var optstr=optarr[i].split(":");
//添加到下拉菜单中 text value
var op=new Option(optstr[1],optstr[0]);
//添加选项到下拉菜单中
selectobj.options.add(op);
}
}
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#00F dashed 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select> 省
<select id="shi" οnchange="getArea(this.value,'xian')"></select> 市
<select id="xian"></select> 县
</div>
</body>
</html>
服务器端文件：ajax-select-text.php
<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "dbConn.php";
//获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);
//要封装的格式 ；id：name；
$str="0:==请选择==";
while($rows=mysql_fetch_assoc($rs)){
$str.=";".$rows['id'].":".$rows['name'];
}
echo $str;
?>
第三种：使用json格式实现联动效果
<!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="ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
var objectId="";
//定义函数，获取数据库的省份数据
function getArea(id,objid){
objectId=objid;
//定义url
var url="ajax-select-json.php";
//alert(url);
//定义参数
var params="id="+id;
//调用ajax进行交互
get(url,params,processData);
}
//处理服务器端返回的数据库，并且显示
function processData(xhr){
//解析服务器端传回的数据
var str=xhr.responseText;
//alert(str);
//将json
var obj=eval("("+str+")");
//获取select对象
var selectobj=$$(objectId);
//创建一个option
//var op=new Option();
//selectobj.options.add(op);
//每次清空
selectobj.options.length=0;
//添加一个请选择选项
var op1=new Option("==请选择==",0);
selectobj.options.add(op1);
//每个元素 id：name
for(var i=0;i<obj.length;i++){
//添加到下拉菜单中 text value
var op=new Option(obj[i].name,obj[i].id);
//添加选项到下拉菜单中
selectobj.options.add(op);
}
}
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#00F dashed 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select> 省
<select id="shi" οnchange="getArea(this.value,'xian')"></select> 市
<select id="xian"></select> 县
</div>
</body>
</html>
服务器端文件：ajax-select-json.php
<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "dbConn.php";
//获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);
//要封装json的格式
while($rows=mysql_fetch_assoc($rs)){
//将rows的每一个数据都给arr 相当于复制
$arr[]=$rows;
}
echo json_encode($arr);
?>
就这样，省市县三级联动就出来了~~~
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
