使用ajax实现三级联动菜单

前端之家收集整理的这篇文章主要介绍了使用ajax实现三级联动菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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>"; } }

原文链接:https://www.f2er.com/ajax/166661.html

猜你在找的Ajax相关文章