Django Crispy Form级联选择JavaScript失效问题求助

实现代码 #

模型定义 #

class Country(models.Model):
    Country = models.CharField(max_length=100, unique=True)
    def __str__(self):
        return self.Country

class Province(models.Model):
    province = models.CharField(max_length=100, unique=True)
    Country = models.ForeignKey(Country, on_delete=models.CASCADE, related_name='province', null=True)
    def __str__(self):
        return self.province

class City(models.Model):
    city = models.CharField(max_length=100, unique=True)
    Province = models.ForeignKey(Province, on_delete=models.CASCADE, related_name='city', null=True)
    def __str__(self):
        return self.city

视图与接口 #

class GetProvincesView(View):
    def get(self, request, *args, **kwargs):
        country_id = request.GET.get('country_id')
        provinces = Province.objects.filter(Country_id=country_id)
        data = [{'id': province.id, 'name': province.province} for province in provinces]
        return JsonResponse(data, safe=False)


class GetCitiesView(View):
    def get(self, request, *args, **kwargs):
        province_id = request.GET.get('province_id')
        cities = City.objects.filter(Province_id=province_id)
        data = [{'id': city.id, 'name': city.city} for city in cities]
        return JsonResponse(data, safe=False)

问题描述 #

已在模板中引入jQuery和Axios，并编写下拉框change事件监听脚本，但选择国家后省份列表无变化，Chrome控制台未打印任何日志（包括document ready的日志）。项目由Cookiecutter搭建，怀疑默认base.html导致脚本无法生效。

排查方案 #

1. 确认脚本加载顺序与位置 #

• Cookiecutter生成的base.html通常会预留{% block scripts %}块用于加载自定义脚本，确保你的脚本放在这个块内，且在jQuery/Axios之后加载。
• 查看页面源码，确认jQuery、Axios和你的自定义脚本标签都存在，且顺序为：依赖库在前，自定义脚本在后。

2. 验证脚本是否被渲染 #

• 在自定义脚本开头添加console.log('自定义脚本已加载')，刷新页面后检查控制台是否输出该内容。若未输出，说明脚本未被正确渲染到页面：
  • 检查模板是否正确继承base.html（开头需有{% extends "base.html" %}）；
  • 确认脚本代码放在正确的block中，不要嵌套在{% block content %}等其他块内导致被覆盖。

3. 检查DOM选择器匹配 #

• 确保脚本中使用的下拉框选择器（如$('#country')）与模板中实际的下拉框ID/class完全一致，拼写错误会导致事件无法绑定。

4. 测试后端接口可用性 #

• 直接在浏览器地址栏访问接口URL（例如/get-provinces/?country_id=1，替换为实际存在的国家ID），查看是否返回正确的JSON格式省份数据，排除后端接口故障。

5. 调整事件绑定方式 #

• 如果下拉框是通过模板动态生成的，使用事件委托绑定change事件，避免DOM未加载完成时绑定失败：

  $(document).ready(function() {
      $(document).on('change', '#country-select', function() {
          let countryId = $(this).val();
          axios.get('/get-provinces/', { params: { country_id: countryId } })
               .then(function(response) {
                   let provinceSelect = $('#province-select');
                   provinceSelect.empty();
                   response.data.forEach(function(province) {
                       provinceSelect.append(`<option value="${province.id}">${province.name}</option>`);
                   });
               });
      });
  });
  

内容的提问来源于stack exchange，提问作者Philippe Haumesser