小编给大家分享一下php实现二级联动菜单的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
php实现二级联动菜单的方法：首先创建好HTML文件和PHP文件；然后编写前端代码以及后端逻辑代码；接着向后台发送一个请求；最后将值用JS呈现在页面中即可。
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
$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实现二级联动菜单的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
