利用php mysqsl dom 实现省市县三级联动

来源：互联网发布：东莞常平买房子知乎编辑：程序博客网时间：2024/04/28 07:54

//html文件

//加上php文件从数据库中获取数据

<!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 onload="getArea('','sheng')">
<div style="border:#03C 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>

//封装的js文件