php+js+ajax+mysql实现省市三级联动 - PHP教程
发布时间：2014-12-04 23:34:33 所属栏目：PHP教程 来源：站长网
导读：效果如下图： 思路：先获取所选省的市或者是所选时的县，将获取的数据转换为jason格式的字符串返回到ajax客户端，在客户端使用eval将jason格式的字符串转化为对
|
效果如下图：
思路：先获取所选省的市或者是所选时的县，将获取的数据转换为jason格式的字符串返回到ajax客户端，在客户端使用eval将jason格式的字符串转化为对象，将对象的每个元素值创建成文本节点，并创建option节点，将文本节点追加到option节点，在将option的节点追加给select节点。 ajax-area-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>实现使用ajax+dom+php+mysl 实现三级联动（省市县）</title>
<script src="Scripts/ajaxUtil.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//定义全局变量objectId用来保存select的onchange事件调用的函数传过来的值（sheng，shi，xian），一边以后调用select对象用
var objectId="";
//定义函数，获取数据库的省份数据
function getArea(id,objid){
objectId=objid;
//每次往select节点写入option前先将原有的option节点清掉（关于这个节点删除，还有更简单的方法在我其他文章有）
var sel2=document.getElementById(objid);
var childS=sel2.childNodes;
for(var i=childS.length-1;i>=0;i--){
//alert(childS.length);
sel2.removeChild(childS[i]);
}
//定义url
var url="ajax-youku-server.php";
//定义参数
var params="id="+id;
//调用ajax 进行交互
get(url,params,processData);
}
//处理服务器端返回的数据并且显示
function processData(xhr){
//将服务器端返回的jason格式的字符串转化为对象
var obj=eval("("+xhr.responseText+")");
//获取对应objectId（sheng，shi，xian）变量的下拉菜单的对象
var sel1=document.getElementById(objectId);
//创建option节点
var op1=document.createElement("option");
//给option加上value属性并赋值为0
op1.setAttribute("value",0);
//创建文本节点text
var text=document.createTextNode("----请选择----");
//将文本节点追加给op1
op1.appendChild(text);
//将op1追加给sel1
sel1.appendChild(op1);
//在此将jason数组对象的下表为id的作为option的value值，将下表为name的值作为文本节点追加给
for(var i=0;i<obj.length;i++){
var op1=document.createElement("option");
//alert(obj[i].id);
op1.setAttribute("value",obj[i].id);
//创建文本节点text
var text=document.createTextNode(obj[i].name);
op1.appendChild(text);
sel1.appendChild(op1);
//alert(obj[i-1].id+"-"+obj[i-1].name);
}
}
</script>
</head>
<body onload="getArea('','sheng')">
<div style="border:#006 dashed 1px;">
<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>
ajaxUtil.js URL：http://www.bianceng.cn/webkf/PHP/201410/45951.htm
（编辑：佛山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读