首页 / PHP / php怎么实现二级联动菜单

php怎么实现二级联动菜单

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了php怎么实现二级联动菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2485字，纯文字阅读大概需要4分钟。

内容图文

php实现二级联动菜单的方法：首先创建好HTML文件和PHP文件；然后编写前端代码以及后端逻辑代码；接着向后台发送一个请求；最后将值用JS呈现在页面中即可。

php怎么实现二级联动菜单 - 文章图片

本文操作环境：windows7系统、PHP7.1版，DELL G3电脑

PHP+ajax实现二级联动菜单功能示例

如何实现二级联动

工作原理

二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，它只会刷新我们需要改变值的地方，我们首先看下它的工作流程。

  • 第一步：我们会向后台发送一个请求
  • 第二步：后台接受请求后，会返回给我们一个值
  • 第三步：将值用JS呈现在页面中

HTML代码

<html>
<head>
<title>www.jb51.net 二级联动</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}
.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}
</style>
<head>
<body>
  <p id="area-box">
    <select class="area-select" id='address'>
      <option value="0">请选择省份</option>
      <option value="1">四川</option>
      <option value="2">河北</option>
      <option value="3">湖南</option>
    </select>
    <select class="area-select" id="city">
      <option>请选择城市</option>
    </select>
  </p>
  <script>
  $(function(){
    //初始化数据
    var url = 'address.php'; //后台地址
    $("#address").change(function(){ //监听下拉列表的change事件
      var address = $(this).val(); //获取下拉列表选中的值
      //发送一个post请求
      $.ajax({
        type:'post',
        url:url,
        data:{key:address},
        dataType:'json',
        success:function(data){ //请求成功回调函数
          var status = data.status; //获取返回值
          var address = data.data;
          if(status == 200){ //判断状态码，200为成功
            var option = '';
            for(var i=0;i<address.length;i++){ //循环获取返回值，并组装成html代码
              option +='<option>'+address[i]+'</option>';
            }
          }else{
            var option = '<option>请选择城市</option>'; //默认值
          }
          $("#city").html(option); //js刷新第二个下拉框的值
        },
      });
    });
  });
  </script>
</body>

【推荐学习：PHP视频教程】

PHP代码

<?php
  $key = $_POST['key']; //获取值
  $address[1] = array('成都','绵阳','德阳');
  $address[2] = array('石家庄','唐山','秦皇岛');
  $address[3] = array('长沙','株洲','湘潭');
  if(!empty($address[$key])){ //有值，组装数据
    $result['status'] = 200;
    $result['data'] = $address[$key];
  }else{ //无值，返回状态码220
    $result['status'] = 220;
  }
  echo json_encode($result); //返回JSON数据
?>

运行效果：

php怎么实现二级联动菜单 - 文章图片

其实三级联动和二级联动的原理都是一样的，只是在其基础上在重复一次而已

以上就是php怎么实现二级联动菜单的详细内容。

本文系统来源：https://www.php.cn/php-ask-472974.html

内容总结

以上是互联网集市为您收集整理的php怎么实现二级联动菜单全部内容，希望文章能够帮你解决php怎么实现二级联动菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/121682.html

来源：【匿名】