您的位置：首页 > 编程语言 > PHP开发

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

2012-03-02 00:16 495 查看

//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 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文件

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);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航