您的位置：首页 > 其它

使用ajax实现三级联动菜单

2013-03-14 19:04 741 查看

index.html文件

<head>

<title> 三级联动 </title>

</head>

<script>

function getArea(val,table){

var xhr;

if(window.ActiveXObject){

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}

var url = "ajax.php";

xhr.open("POST",url,true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.onreadystatechange = callback;

xhr.send("val="+val+"&table="+table);

function callback(){

if(xhr.readyState==4){

if(xhr.status==200){

//alert(xhr.responseText);

document.getElementById(table).innerHTML=xhr.responseText;

}

}

}

}

</script>

<body onload="getArea('','t_province')">

<select id="t_province" onchange="getArea(this.value,'t_city')">

</select>

<select id="t_city" onchange="getArea(this.value,'t_district')">

</select>

<select id="t_district">

</select>

</body>

</html>

ajax.php文件

<?php

mysql_connect('localhost','root','');

mysql_select_db('china');

mysql_query('set names utf8');

//获得用户点击的值以及应该显示的表明

$val=$_POST['val'];

$table=$_POST['table'];

if($table=='t_province'){

//查询所有的省

$sql="select ProName from $table order by ProSort";

$result=mysql_query($sql);

$rows=array();

while($row=mysql_fetch_row($result))

{

echo "<option>$row[0]</option>";

}

}else if($table=='t_city'){

$sql="select CityName from t_city where ProId=(select ProID from t_province where ProName = '$val')";

$result=mysql_query($sql);

$rows=array();

while($row=mysql_fetch_row($result))

{

echo "<option>$row[0]</option>";

}

}else if($table=='t_district'){

$sql="select DisName from t_district where CityID=(select CityID from t_city where CityName='$val')";

$result=mysql_query($sql);

$rows=array();

while($row=mysql_fetch_row($result))

{

echo "<option>$row[0]</option>";

}

}

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

标签：

相关文章推荐

新的分享

章节导航