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

本文实例讲述了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>
  <div 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>
  </div>
  <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相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

赞 (0)

相关推荐

  • 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码

    绝对原创   测试地址: http://www.mlmm.cn/mypage/?name=ceshi 测试页代码: 复制代码 代码如下: <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>php+ajax动态生成下拉菜单</title>  <script lang

  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 实现效果:当选择大类时,小类下拉框里的选项内容也随着改变. 实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类,第二个是小类.大类的值可以是预先写好,也可以是从数据库读取. <lab

  • jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1)  浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码 代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)

  • php 三级联动菜单

    数据库结构 复制代码 代码如下: -- 表的结构 `bigclass` -- CREATE TABLE `bigclass` ( `bigclassid` int(11) NOT NULL auto_increment, `bigclassname` varchar(200) collate utf8_unicode_ci NOT NULL, `sort` int(11) NOT NULL, `suoshu` int(1) NOT NULL, PRIMARY KEY (`bigclassid`)

  • PHP+mysql实现的三级联动菜单功能示例

    本文实例讲述了PHP+mysql实现的三级联动菜单功能.分享给大家供大家参考,具体如下: 数据库mysql -- 数据库: `student` -- -- -------------------------------------------------------- -- -- 表的结构 `student` -- CREATE TABLE `student` ( `id` int(50) NOT NULL auto_increment, `name` varchar(50) collate u

  • thinkPHP实现的联动菜单功能详解

    thinkPHP实现的联动菜单功能详解

    本文实例讲述了thinkPHP实现的联动菜单功能.分享给大家供大家参考,具体如下: 联动菜单,首先给你看看前端是怎么写的: <div id="newCat"> <div class="all_type" id="allGoogsCat">所有商品分类</div> <div class="spfl-warp <?php if(CONTROLLER_NAME != 'Index' || ACT

  • php+mysql实现的二级联动菜单效果详解

    本文实例讲述了php+mysql实现的二级联动菜单效果.分享给大家供大家参考,具体如下: <!--php+mysql二级联动--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>生成学院专业级联下拉菜单测试 </title> </head> <

  • PHP+Mysql+Ajax+JS实现省市区三级联动

    PHP+Mysql+Ajax+JS实现省市区三级联动

    基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh

  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单

    首先是数据库的设计.分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id. 数据库有内容后,就可以开始写代码,进行二级联动的实现. 先在后台php获取所有pid为0的数据,保存到$cate中,然后在第一层的<select>中用foreach循环输出. Html代码: 复制代码 代码如下: <select name="type" s

  • PHP+JS三级菜单联动菜单实现方法

    本文实例讲述了PHP+JS三级菜单联动菜单实现方法.分享给大家供大家参考,具体如下: <html> <head> <title> 智能递归菜单-读取数据库 </title> <style> TD { FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; LINE-HEIGHT: 130%; letter-spacing:1px } A:link { COLOR: #9

  • 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html> <html> <head> <meta charset=&q

随机推荐