文章目录

PHP - AJAX - 省市区三级联动

php

public function indexAction() {
    //获取父级代号pid
    $pid = $this->getParam('pcode');
    //数据查询
    $areaModel = new Model_Area();
    $fields = "*";
    $whereArr[] = array('pid', $pid);
    $areadetail = $areaModel->getArea($fields, $whereArr);
    //var_dump($areadetail);
    echo json_encode($areadetail);
}

html

<div id="ssq"></div>

js

<script type="text/javascript">
//当页面内容都加载完才执行
  $(document).ready(function(e) {
    //加载三个下拉列表
    $("#ssq").html("<select id='sheng' class='txtinput1'></select> <select id='shi' class='txtinput1'></select> <select id='qu' class='txtinput1'></select>");
    //加载显示数据
    //1.加载省份
    FillSheng();
    //2.加载市
    FillShi();
    //3.加载区
    FillQu();
    //当省份选中变化,重新加载市和区
    //当元素的值发生改变时,会发生 change 事件,该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
    $("#sheng").change(function(){
      //加载市
      FillShi();
      //加载区
      FillQu();
    })
    //当市选中变化,重新加载区
    $("#shi").change(function(){
      //加载区
      FillQu();
    })
  });
  //加载省份信息
  function FillSheng()
  {
    //取父级代号
    var pcode = 0;
    //根据父级代号查数据
    $.ajax({
      //取消异步,也就是必须完成上面才能走下面
      async:false,
      url:"/area",
      data:{pcode:pcode},
      type:"POST",
      dataType:"json",
      success: function(data){
        var str="";
        //遍历数组,把它放入sj
        //return false;
        for(var sj in data){
            console.log(data);
          str=str+"<option value='"+data[sj].id+"'>"+data[sj].name+"</option>";
        }
        $("#sheng").html(str);
      }
    });
  }
  //加载市信息
  function FillShi()
  {
    //取父级代号
    var pcode =$("#sheng").val();
    //根据父级代号查数据
    $.ajax({
      //取消异步,也就是必须完成上面才能走下面
      async:false,
      url:"/area",
      data:{pcode:pcode},
      type:"POST",
      dataType:"json",
      success: function(data){
        var str="";
        //遍历数组,把它放入sj
        for(var sj in data){
          //<option value="11">北京</option>
          str=str+"<option value='"+data[sj].id+"'>"+data[sj].name +"</option>";
        }
        $("#shi").html(str);
      }
    });
  }
  //加载区信息
  function FillQu()
  {
    //取父级代号
    var pcode =$("#shi").val();
    //根据父级代号查数据
    $.ajax({
      //不需要取消异步
      url:"/area",
      data:{pcode:pcode},
      type:"POST",
      dataType:"json",
      success: function(data){
        var str="";
        //遍历数组,把它放入sj
        for(var sj in data){
          //<option value="11">北京</option>
          str=str+"<option value='"+data[sj].id+"'>"+data[sj].name +"</option>";
        }
        $("#qu").html(str);
      }
    });
  }
</script>

预览

省市区

返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论

7 条评论
  1. Paul 白银   Paul  

    大佬求带 Ajax @(吐舌)

    1. 小尾巴 王者   小尾巴   博主
      @ Paul

      Come on. baby~

  2. devoted 黄金   devoted  

    哎呦,不错哦,继续加油!好久没来这了

    1. 小尾巴 王者   小尾巴   博主
      @ devoted

      欢迎常来 ๑乛◡乛๑

  3. 老黄 钻石   老黄  

    还记得那是11年的暑假,跟着老师学习了如何实现3级联动,然而现在已经全部忘记了。

    1. 小尾巴 王者   小尾巴   博主
      @ 老黄

      老哥6年前就接触编程了呀 ๑乛◡乛๑
      那时我还在上高中 OωO

      1. 老黄 钻石   老黄  
        @ 小尾巴

        我只是做了几年代码的搬运工,还是你6.