django 下拉菜单三级联动 及 对应的数据库代码

三级联动的下拉菜单通常用于根据用户选择的前两个选项，动态加载第三个选项的内容。在 Django 中，可以通过 AJAX 请求来实现这个功能。

下面是一个简单的示例，假设你要实现一个三级联动的省市县选择：

首先，在 Django 中定义三个模型，分别表示省、市和县：

class Province(models.Model):
    name = models.CharField(max_length=50)

class City(models.Model):
    name = models.CharField(max_length=50)
    province = models.ForeignKey(Province, on_delete=models.CASCADE)

class County(models.Model):
    name = models.CharField(max_length=50)
    city = models.ForeignKey(City, on_delete=models.CASCADE)

然后，在视图中定义三个函数，分别用于返回省、市和县的数据：

from django.http import JsonResponse

def get_provinces(request):
    provinces = Province.objects.all()
    data = [{'id': p.id, 'name': p.name} for p in provinces]
    return JsonResponse({'data': data})

def get_cities(request, province_id):
    cities = City.objects.filter(province_id=province_id)
    data = [{'id': c.id, 'name': c.name} for c in cities]
    return JsonResponse({'data': data})

def get_counties(request, city_id):
    counties = County.objects.filter(city_id=city_id)
    data = [{'id': c.id, 'name': c.name} for c in counties]
    return JsonResponse({'data': data})

这三个函数都返回一个 JSON 格式的数据，其中包含了对应模型的 id 和 name 字段。

最后，在模板中使用 AJAX 请求来动态加载下拉菜单的选项。下面是一个简单的示例：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#province').change(function() {
      var province_id = $(this).val();
      if (province_id) {
        $.ajax({
          url: '/get_cities/' + province_id,
          success: function(data) {
            var options = '<option value="">选择城市</option>';
            for (var i = 0; i < data.data.length; i++) {
              options += '<option value="' + data.data[i].id + '">' + data.data[i].name + '</option>';
            }
            $('#city').html(options);
            $('#county').html('<option value="">选择县区</option>');
          }
        });
      } else {
        $('#city').html('<option value="">选择城市</option>');
        $('#county').html('<option value="">选择县区</option>');
      }
    });

    $('#city').change(function() {
      var city_id = $(this).val();
      if (city_id) {
        $.ajax({
          url: '/get_counties/' + city_id,
          success: function(data) {
            var options = '<option value="">选择县区</option>';
            for (var i = 0; i < data.data.length; i++) {
              options += '<option value="' + data.data[i].id + '">' + data.data[i].name + '</option>';
            }
            $('#county').html(options);
          }
        });
      } else {
        $('#county').html('<option value="">选择县区</option>');
      }
    });

    $.ajax({
      url: '/get_provinces/',
      success: function(data) {
        var options = '<option value="">选择省份</option>';
        for (var i = 0; i < data.data.length; i++) {
          options += '<option value="' + data.data[i].id + '">' + data.data[i].name + '</option>';
        }
        $('#province').html(options);
        $('#city').html('<option value="">选择城市</option>');
        $('#county').html('<option value="">选择县区</option>');
      }
    });
  });
</script>

<select name="province" id="province"></select>
<select name="city" id="city"></select>
<select name="county" id="county"></select>

在这个例子中，我们使用了 jQuery 来发送 AJAX 请求，并动态更新下拉菜单的选项。当用户选择省份时，我们发送一个请求来获取对应的城市数据，并生成 city 下拉菜单的选项。当用户选择城市时，我们发送另一个请求来获取对应的县区数据，并生成 county 下拉菜单的选项。

最后，我们在页面加载完成后，发送一个请求来获取省份数据，并生成 province 下拉菜单的选项。