思路:
1、建立一些空的下拉菜单
2、先初始化省份的列表
3、当我们选择省份时,对应显示该省所有的市,选择了市,则显示该市所有的县。
实现1:使用innerHTML的方式 向select中插入内容(不兼容ie)
实现2:
1、修改服务器端返回的数据格式(text)
2、客户端可以使用dom、js数组进行解析
然后通过js向下拉菜单中增加选项
实现3、
1、修改服务器端返回的数据格式(json)
2、客户端可以使用dom、js数组进行解析
然后通过对象,js向下拉菜单中增加选项
实现仿google的分页效果 ajax+json+dom+php+mysql
代码如下:
<!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>