php+js+ajax+mysql实现省市三级联动

php+js+ajax+mysql实现省市三级联动2014-10-18 csdn博客风火程序员效果如下图：

思路：先获取所选省的市或者是所选时的县，将获取的数据转换为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]）;} //定义urlvar 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属性并赋值为0op1.setAttribute（"value",0）;//创建文本节点textvar text=document.createTextNode（"----请选择----"）;//将文本节点追加给op1op1.appendChild（text）;//将op1追加给sel1sel1.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）;//创建文本节点textvar 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