PHP+MYSQL+AJAX 3级联动下拉菜单

最新推荐文章于 2024-04-24 14:48:34 发布

t240034137

最新推荐文章于 2024-04-24 14:48:34 发布

阅读量6k

点赞数

文章标签： mysql ajax php xmlhttprequest function sql

本文链接：https://blog.csdn.net/t240034137/article/details/5026243

版权

<!--

by:moskey.tong

date:09-11-25

感谢CSDN中PHP版面的dzxccsu大哥！帮我写的代码！AJAX不熟悉！在此谢谢！

-->

getcity.php页面:

<?
require_once '../common.inc.php';//这边是我MYSQL数据的配置页面
$result=$_SG['db']->fetch_all("select * from area_district where parent_id=0");//这边是我MYSQL数据库的类（看不懂的写下面的注释里面的）

/*就是这样写的

*$conn=mysql_connect("localhost","root","");
*mysql_select_db("tt");
*mysql_query('Set names utf8');
*$sql="select * from area_district where parent_id='0'";
*$result=mysql_query($sql);

*/
foreach ($result as $key=>$val)
{
$str.=$val['area_name'].','.$val['area_id'].'|';
}
echo $str;
exit();

$str=substr($str,0,strlen($str)-1);
$result_str=explode('|',$str);

foreach($result_str as $key=>$val)
{
list($area_name,$area_code)=explode(',',$val);
echo "<br>";
echo $area_name;
echo "<br>";

}
?>

==========================================================================================

getdiqu.php页面:

<?
require_once '../common.inc.php';//同理
$city=substr($_GET['city'],0,2);

$arry=array('31','11','12');//这边是选中MYSQL数据库中直辖市的parent_id 中的前2个字符，为了后面判断是否是直辖市
if(in_array($city,$arry)==true)//如果是直辖市
{
$i=$city."__00";
$sql="select area_name ,area_id from area_district where area_id like '$i' or parent_id like '$i'";
}
else//如果不是
{
$i=$city."__00";
$sql="select area_name ,area_id from area_district where area_id like '$i' and parent_id like '$i'";
}

$result=$_SG['db']->fetch_all($sql);//同理
foreach($result as $key=>$val){
$str.=$val['area_name'].','.$val['area_id'].'|';
}
echo $str;
?>

========================================================================================

zxs.php页面：

<?
require_once '../common.inc.php';//同理
$diqu=substr($_GET['diqu'],0,4);
$arry=array('31','11','12');
if(in_array(substr($diqu,0,2),$arry)==true)
{
$sql="";
}
else
{
$sql="select area_name ,area_id from area_district where parent_id like '$diqu%' and area_id like '$diqu%' ";
}

$result=$_SG['db']->fetch_all($sql);//同理
foreach($result as $key=>$val){
$str.=$val['area_name'].','.$val['area_id'].'|';
}
echo $str;

===========================================================================================

主页面：

<html>
<script>
function createRequest(){
    var request;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request;
}

/*
function createRequest(){
    var request;
    if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
        request = new XMLHttpRequest();
    } else if(window.ActiveXObject){ // For Internet Explorer
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request;
}
*/
function getCity(){
    var ajax=createRequest();
    var url = "getCity.php";
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatePageCity(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updatePageCity(str){
alert(str);//看弹出来的信息
   var str1 = new Array();
    if(str!=""){
        str1 =str.split("|");
        document.getElementById("city").options[0]=new Option("-请选择城市-", " ");
        for(var i=0;i<str1.length-1;i++){
document.getElementById("city").options[i+1]=new Option(str1[i],str1[i]);
    }
}
}

//获取地区
function getDiqu(){
    var ajax=createRequest();
    var city=document.getElementById("city").value;
    var url = "getDiqu.php?city="+city;
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updateDiqu(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updateDiqu(str){
alert(str);
   var str1 = new Array();
     if(str!=""){
        str1 =str.split("|");
        for(var i=0;i<str1.length-1;i++){
document.getElementById("diqu").options[i]=new Option(str1[i],str1[i]);
    }
}
}

//获取ZXS
function getzxs(){
    var ajax=createRequest();
    var diqu=document.getElementById("diqu").value;
    var url = "mgr/getzxs.php?diqu="+diqu;
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatezxs(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updatezxs(str){
   var str1 = new Array();
     if(str!=""){
        str1 =str.split("|");
        for(var i=0;i<str1.length-1;i++){
  str2=str1[i].split(",");
        document.getElementById("zxs").options[i]=new Option(str2[0],str2[1]);

    }
}
}

</script>

</body>
</html>

基本上是这样：我说说一下原理：getcity.PHP 页面打印出每个省！然后ajax.open("GET",url,true);
传值给页面 ,然后updatePageCity(str)这个函数截取内容在变成数组！在传给每个Option也就是下拉菜单.
然后你悬择下拉菜单的值触发getDiqu()方法然后选取你选择的值附加在url上传给getDiqu.php这个页面。这个页面在GET出值也就是这个（$city=$_GET['city'];），然后在查询
通过 ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatexxx(ajax.responseText);
        }

这个方法把值从XX.PHP页面查询出来的值交给AJAX处理！
然后在updateDiqu(str)函数变成数组传给每个Option也就是下拉菜单。下面的ZXS.PHP页面就多说了。和上面一样！

t240034137

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
PHP+MYSQL+AJAX 3级联动下拉菜单

by:moskey.tongdate:09-11-25感谢CSDN中PHP版面的dzxccsu大哥！帮我写的代码！AJAX不熟悉！在此谢谢！-->getcity.php页面:require_once ../common.inc.php;//这边是我MYSQL数据的配置页面$result=$_SG[db]->fetch_all("select * from are
复制链接

扫一扫