用 js 实现 省市县三级联动 调取数据库省市县数据

原参考网址

https://blog.csdn.net/yan791124465/article/details/71191803

我的后台用的 tp3.2

效果图

html 页面

<li>所在地区：
<div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-3">所在省</label>
        <div class="col-md-9">

            <select name="province" required id="province" class="form-control"  onclick="chooseMarket();">
                  <option selected value="">选择所在的省份</option>
          
                  <foreach name="province" item="vo">
                    <option value="{$vo.provinceid}">{$vo.province}</option>
                  </foreach>
            </select>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-3">所在市</label>
        <div class="col-md-9">
            <select id="market" name="city" required class="form-control"   onclick="chooseArea();"  >
                <option selected value="">请选择所在的市</option>
            </select>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <label class="control-label  col-md-3">所在区/县</label>
        <div class="col-md-9">
                <select name="county" required id="area"  class="form-control" onclick="defaultNext()">
                    <option selected value="">请选择所在的区/县</option>
                </select>
        </div>
    </div>
</div>
</li>



<!-- 隐藏域携带 sc_area sc_areanum  跟随form表单提交值 -->
<input type="hidden" name="post[sc_area]" id="sc_area" value="">
<input type="hidden" name="post[sc_areanum]" id="sc_areanum" value="">

对应 html 中的 js

<!-- 后来 做的三级联动  从数据库里面查出来 -->

<script type="text/javascript">

 function  chooseMarket() {

      console.log('js点击省');

      // var options=$("#province option:selected").text();   // 获取名字
      // var options=$("#province option:selected").val();       // 获取省 的id
      var options=$("#province option:selected");       
      
      // console.log(options.val());
  
      // 下面 是给 市 遍历值 的
      if(options.text()!="选择所在的省份"){

        $.ajax({
    
            url:"{:U('Activity/chengguo/ajax_chooseMarket')}",       
            type:'POST',
            data:{
              id:options.val()
            },
            dataType:'JSON',
            success:function(data){
             
              console.log('走到 遍历市');
              // console.log(data);
              
              // 把对象转成数组
              var data2 = [];   
              for (let i in data) {
                  let o = {};
                  o[i] = data[i];
                  data2.push(o)
              }
            
              // 去除最后两个元素
              var data3 = data2.pop();
              data2.pop();

              // console.log(data2);

              var item = ""; 
              for(var i = 0 ; i < data2.length; i++) { 

                item += '<option value="' + data2[i][i].cityid + '">' + data2[i][i].city + '</option>';
            }

            $("#market").append(item);
            
            },
            error:function(){
              alert(222);
            }
        })

      }

      $("#market").empty();
      $("#area").empty();
}


  // 遍历 显示 市 下面 所有的 县
  function chooseArea() {

    var city = $("#market option:selected");

    // console.log(city.val());
    // console.log(city.text());
    
    if(city.text()!="请选择所在的市"){

          $.ajax({
              url:"{:U('Activity/chengguo/ajax_chooseArea')}",       
              type:'POST',
              data:{
                id: city.val()
              },
              dataType:'JSON',
              success:function(data){
               
                // console.log(data);
                var data2 = [];   
                for (let i in data) {
                    let o = {};
                    o[i] = data[i];
                    data2.push(o)
                }
              
                // 去除最后两个元素
                var data3 = data2.pop();
                data2.pop();

                console.log(data2);
                var item = ""; 
                for(var i = 0 ; i < data2.length; i++) { 

                  item += '<option value="' + data2[i][i].areaid + '">' + data2[i][i].area + '</option>';   
              }

              $("#area").append(item);
              
              },
              error:function(){
                alert(222);
              }
          })
    }
    $("#area").empty();
}


// <!-- 隐藏域携带 sc_area sc_areanum -->
// <input type="hidden" name="post[sc_area]" id="sc_area" value="">
// <input type="hidden" name="post[sc_areanum]" id="sc_areanum" value="">



// 这一个步骤 获取最后点击的 县id 并给 form 表单赋值
function defaultNext() {

	var pro = $("#province option:selected");    // 获取 省
	var city = $("#market option:selected");   // 获取 市

    var area = $("#area option:selected");   // 获取到最后的 areaid

    var dizhi = pro.text() +','+city.text()+','+area.text();

    var num = area.val();
    // 拼接 省市县
    // console.log(area.val());
    // console.log(pro.text());
    // console.log(city.text());
    // console.log(area.text());
    // console.log(dizhi);

    $('#sc_areanum').val(num);    // 赋值
    $('#sc_area').val(dizhi);

}
</script>

对应 控制器

// 初加载页面的时候，要把 所有省的值 遍历显示到页面
// 显示 省份
$pro_model=M('dqprovinces');
$province = $pro_model->select(); 

$this->assign("province",$province);

js 中对应的控制器，返回对应 下属市县列表

//  页面 ajax 返回 省 下面的市

public function ajax_chooseMarket(){

    $id = I('post.id');

    $city_model=M('dqcities');
  
    $where['provinceid'] = $id;
    $result = $city_model->where($where)->select();  

    // var_dump($result);
    // die;
    $this->ajaxReturn($result,'JSON');
}


// 遍历 市 下面的 县
public function ajax_chooseArea(){

    // 接收传过来的id
    $id = I('post.id');

    $area_model=M('dqareas');
  
    $where['cityid'] = $id;
    $result = $area_model->where($where)->select();  

    // var_dump($result);
    // die;
    $this->ajaxReturn($result,'JSON');

}