使用ajax实现三级联动菜单

最新推荐文章于 2021-04-13 17:21:29 发布

pqx1993

最新推荐文章于 2021-04-13 17:21:29 发布

阅读量630

点赞数

本文链接：https://blog.youkuaiyun.com/pqx1993/article/details/8674661

版权

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 οnlοad="getArea('','t_province')">
<select id="t_province" οnchange="getArea(this.value,'t_city')">

</select>
<select id="t_city" οnchange="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>";
}
   }