Django自关联实现省市县三级联动查询

今天早睡

发布时间：2026-10-13| 4人浏览过

原创

本文介绍如何利用Django的自关联特性实现省市县三级联动查询。通过建立包含pid外键的AddressInfo模型，配合后端URL路由与JSON接口，以及前端jQuery动态加载下拉框选项，完整展示从数据库设计到前端交互的实现过程。

问题引出

1 问题引出

在Web开发中，常需处理具有层级关联的字段，例如省、市、县的选择。当用户选择省份后，市级下拉框应仅显示该省下的城市；选择城市后，县级下拉框则显示对应的县区。

传统做法是建立三个独立的模型表并通过外键建立一对多关系，但这在结构上显得冗余且不合理。Django提供了自关联（Self-Referential）机制，允许模型实例指向同一模型的其他实例，即一条数据关联另一条数据，从而更优雅地解决此类层级问题。

本文将以省、市、县三级结构为例，详细阐述自关联模型的具体实现步骤。

具体实现

2 具体实现

建立数据表Model

2.1 建立数据表Model

在model.py文件中定义数据模型。


class AdressInfo(models.Model):
  address = models.CharField(max_length = 200, null = True, blank = True, verbose_name = ‘地址')
  pid = models.ForeignKey(‘self' , null = True, blank = True, verbose_name = ‘自关联')

  def __str__(self):
    return self.adress

说明：

name字段用于存储省、市或县的名称。 pid字段为外键，指向模型自身（self），实现自关联，此处也可写作AddressInfo。 null=True表示数据库允许该字段为空，适用于省级单位，因其没有父级。 blank=True表示在Django Admin后台录入数据时允许该字段为空。

定义好模型后，需执行数据库迁移命令以创建或更新数据表。

python manage.py makemigrations python manage.py migrate

迁移完成后，即可在Django后台管理界面中录入省、市、县数据。

后端url和view函数

2.2 后端url和view函数

配置前端网页地址与后端处理函数的映射关系，并通过正则表达式从请求中获取前端传递的父级ID（pid）。

url.py 文件


urlpatterns = [
  url(r'^addr/(\d+)$', Address.addrAPI, name = 'Addr)
]

view.py 文件


def addrAPI(request,addr_id): # 接收一个参数的id，指model中的pid属性对应的字段
  if (int(addr_id) == 0): # 为0表示查询省，省的pid_id为null
    address_data = AddressInfo.objects.filter(pid__isnull = True).values('id','address')
  else: # 查询市或其他县
    address_data = AddressInfo.objects.filter(pid_id = int(addr_id)).values('id','address')

  area_list = []
  for a in address_data:
    area_list.append({'id':a['id'], 'address':a['address']})

  return JsonResponse(area_list, safe = False)

前端template

2.3 前端template

前端主要负责展示界面及响应用户操作，核心逻辑在于当下拉框值改变时触发相应函数。此处仅展示关键代码部分。

address.html 文件


<body>
  <select id = 'pro'>
    <option value=''>请选择省</option>
  </select>
  <select id = 'city'>
    <option value=''>请选择市</option>
  </select>
  <select id = 'dis'>
    <option value=''>请选择县</option>
  </select>
</body>

<script>
address = function(a, b)
{
  $.get('/addr/'+a, function (dic){
    $.each(dic, function(index, item){
      b.append('<option value="' + item.id + '">' + item.address + '</option>')
    })
  })
}

$(function (){
  // 获取省市县元素
  pro = $('#pro')
  city = $('#city')
  dis = $('#dis')

  // 查询省信息
  address(0, pro)

  // 根据省查询市信息
  pro.change(function(){
    city.empty().append('<option value="">请选择市</option>');
    dis.empty().append('<option value="">请选择县</option>');
    adress(this.value, city)
  })
  // 根据市查询县信息
  city.change(function(){
    dis.empty().append('<option value="">请选择县</option>');
    adress(this.value, dis)
  })
})
</script>