//html文件
//加上php文件 从数据库中获取数据
利用php mysqsl dom 实现省市县三级联动
<!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" src="ajaxUtil.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var objectID="";
function getArea(id,objid){
//定义url 定义参数
objectID=objid;
var url="ajax-area-select-server.php";
var params="id="+id;
// 调用ajax
get(url,params,process);
}
//处理服务器端显示的数,并显示
function process(xhr){
var arr=$$(objectID);
var arr1=xhr.responseText;
//alert(arr1);
var str=eval(arr1);
alert(str[0].name);
alert(str[0].id);
for(var i=0;i<str.length;i++){
//创建一个option
var option=document.createElement("option");
var text=document.createTextNode(str[i].name);
option.value=str[i].id;
option.appendChild(text) ;
arr.appendChild(option);
}
//次数是一个数组 只能执行一次
/* var str=arr1.split("*");
for(var j=0;j<str.length;j++){
// var Option=document.createElement("option");
var sta=str[j].split("#");
text=sta[1];
value=sta[0];
arr.options[arr.options.length]=new Option(text,value);
}
*/
}
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#03C 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>
//封装的js文件
function get(url1,params,methodName){
//把get函数进行封装
//ajax无刷新的评论技术
//1、发布的评论,无刷新的显示到下面的区域
//2、通过ajax把内容存到服务器上
//3、获取服务器的数据 显示到评论区域
//alert(comment);
//使用ajax引擎
//alert("****************");
var xhr=new XMLHttpRequest();
//这种方式只针对ie浏览器,并且ie6以下有问题
//初始化url
//传递的值 ie encodeURL(comment)
var url=url1+"?"+params+"&r="+Math.random();
//alert(url);
//打开链接 true 异步 false 同步
xhr.open("get",url,true);
//发送请求
xhr.send(); //status 2
//监听readyState的值的改变,每次改变都会执行下面的函数
xhr.onreadystatechange=function (){
if(xhr.readyState==4){
//段落标记
methodName(xhr);
}
}
}
function $$(id){
return document.getElementById(id);
}