5二级菜单联动(1menu01.html)

游鹄君2025年8月24日大约 2 分钟

html示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子级菜单联动</title>
</head>
<body>
  <!-- 主菜单下拉框 -->
  <select name="types" id="type"></select>
  <!-- 子级菜单下拉框 -->
  <select name="childtype" id="child"></select>
 
  <script type="text/javascript">
  //获取元素
  var type=document.getElementById('type');
  var child=document.getElementById('child');
 
  //第一部分 获取父级菜单
  // 创建ajax  
  var x = new XMLHttpRequest();
 
  //绑定事件
  x.onreadystatechange=function()
  {
    //判断
    if (x.readyState == 4 && x.status==200)
    {
     //console.log(x.responseText);
     //把接收过来的json字符串转换成由对象组成的数组 
     eval('var obj = '+x.responseText);
     //遍历数组 同时填充option标签选项
     for (var i = 0; i < obj.length; i++) {
       //拼接 option 注意innerHTMl才可以解析字符串拼接标签
       //之所以拼接value是因为之后需要用到父id
       type.innerHTML += '<option value="'+obj[i].id+'">'+obj[i].name+'</option>'
     }
 
     //第三部分设置默认值
     var xs = new XMLHttpRequest();
 
     //绑定事件
     xs.onreadystatechange=function()
     {
       if(xs.readyState==4&&xs.status==200)
       {
         //清空
         child.innerHTML='';
         eval('var pro='+xs.responseText);
         for (var i = 0; i < pro.length; i++) 
         {
          //拼接 子级option 
          child.innerHTML +="<option value='"+pro[i].id+"'>"+pro[i].childname+"</option>";
         }
       }
     }
 
     //父级下标为0的是第一个 所以是obj[0].id
     //初始化
     xs.open('GET','1menu02.php?gid='+obj[0].id,true);
 
     //发送
     xs.send();
    }
  }
 
  //初始化ajax请求
  x.open('GET','1menu01.php',true);
 
  //发送
  x.send();
 
  //第二部分 跟随父级获取改变自己菜单
  //onchange 事件
  type.onchange=function()
  {
    //获取父级id 也就是父级 option 标签的value
    var v = this.value;
    //创建ajax
    var x = new XMLHttpRequest();
    //绑定事件
    x.onreadystatechange=function()
    {
     if(x.readyState==4&&x.status==200)
     {
       //清空
       child.innerHTML='';
       eval('var pro='+x.responseText);
       for (var i = 0; i < pro.length; i++) 
       {
         //拼接 子级option 
         child.innerHTML +="<option value='"+pro[i].id+"'>"+pro[i].childname+"</option>";
       }
     }
    }
 
    //初始化
    x.open('GET',"1menu02.php?gid="+v,true);
 
    //发送
    x.send();
  }
 
  </script>
</body>
</html>

对应的1menu01.php

<?php
  
  //echo 'haha';
  //实例化pdo对象
  $pdo= new PDO('mysql:host=localhost;dbname=pass;charset=utf8;port=3306','root','123456');
 
  //准备sql语句
  $sql="select * from type";
 
  //执行(获取预处理对象)
  $stmt=$pdo->query($sql);
 
  //解析(获取资源结果集)
  $res=$stmt->fetchAll(PDO::FETCH_ASSOC);
 
  //print_r($res);
  //把数组转换成字符串
  $pro=json_encode($res);
 
  echo $pro;

对应的1menu02.php

<?php
 
  //接收父id
  $gid=$_GET['gid'];
  
  //链接数据库
  $pdo=new PDO('mysql:host=localhost;dbname=pass;charset=utf8','root','123456');
 
  //准备sql语句
  $sql='select * from typechild where pid='.$gid;
 
  //执行
  $stmt=$pdo->query($sql);
 
  //解析 获取结果
  $res=$stmt->fetchALL(PDO::FETCH_ASSOC);
 
  //print_r($res);
  //把数组转化成字符串
  echo json_encode($res);