无限极联动_无xian级联的字典表设计-CSDN博客

本文链接：https://blog.csdn.net/MCphp/article/details/77407899

本文介绍了一种在电商项目中使用的无限极联动地址选择器的实现方法，通过前后端配合，实现地区信息的动态加载与展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

表设计

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);
          }

        }

    })
})