使用ajax+dom+php+mysql实现多级联动（省市县）

最新推荐文章于 2021-03-27 18:15:04 发布

csdn-php-张黎

最新推荐文章于 2021-03-27 18:15:04 发布

阅读量2.2k

点赞数 1

文章标签： ajax mysql php javascript 服务器 function

本文链接：https://blog.csdn.net/zl943588435/article/details/7310569

版权

使用ajax+dom+php+mysql实现多级联动（省市县）

思路：
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>