无限极联动

   今天刚学习的无限极联动，用于展示电商项目中的收货地址下面将思路跟代码和大家分享一下

   表设计

   region_id

   region_name

   parent_id

   在表设计中用一个父级ID作为关联

然后先在html页面中打出一个下拉菜单循环放入父级ID为0的一级地区信息

 $data['region'] = $this->db->where('parent_id',0)->get('ci_region_copy')->result_array();

   <!-- 无限极联动 -->
 <select class="region">
<option value="0">请选择</option>
<?php foreach($region as $k=>$v):?>
  <option value="<?= $v['region_id']?>"><?=$v['region_name']?></option>
  <?php endforeach;?>

然后就是JQuery代码实现效果

通过class找到下拉框的对象

绑定change内容改变时间，获取到region_id作为查询条件

发送ajax请求到后台查询出下一级的地区信息，返回JSON

定义一个select 循环data将地区信息拼成option

最后用after方法追加select

//无限极联动
$(document).on("change",'.region',function(){
    var parent_id = $(this).val();
    var url = "<?php echo site_url('admin/brand/getRegion')?>";
    var _this = $(this);
    $.ajax({
        url:url,
        type:'post',
        data:{parent_id:parent_id},
        dataType:'json',
        success:function(data){
          if(data.length>0){
             //select
          var select = $('<select class="region"><option value="0">请选择</option></select>');
          $.each(data,function(k,v){
            select.append('<option value="'+v.region_id+'">'+ v.region_name +'</option>');
          })
          _this.nextAll().remove();
          _this.after(select);
          }
         
        }

    })
})