• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    PHP+ajax实现二级联动菜单功能示例

    本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考,具体如下:

    如何实现二级联动

    工作原理

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

    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;iaddress.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程序设计有所帮助。

    您可能感兴趣的文章:
    • ajax三级联动下拉菜单效果
    • AJAX省市区三级联动下拉菜单(java版)
    • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
    • ajax读取数据库内容实现二级联动下拉选择菜单示例
    • Ajax二级联动菜单实现原理及代码
    • 基于asp+ajax和数据库驱动的二级联动菜单
    • 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
    • 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
    • 琥珀无限级分类联动菜单AJAX版
    • Ajax实现二级联动菜单
    上一篇:PHP实现十进制数字与二十六进制字母串相互转换操作示例
    下一篇:PHP实现的ID混淆算法类与用法示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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