django 下拉菜单二级联动

在 Django 中实现下拉菜单的二级联动，可以使用 Ajax 技术实现。具体步骤如下：

1. 定义两个模型，例如 `Province` 和 `City`，它们之间通过外键关联。

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)

2. 在表单中添加两个下拉菜单，分别对应省份和城市。

<form>
    <select id="province">
        <option value="">选择省份</option>
        {% for province in provinces %}
            <option value="{{ province.id }}">{{ province.name }}</option>
        {% endfor %}
    </select>
    <select id="city" disabled>
        <option value="">选择城市</option>
    </select>
</form>

3. 编写 Ajax 请求处理视图函数，获取选中的省份，返回该省份下的所有城市。

from django.http import JsonResponse

def get_cities(request):
    province_id = request.GET.get('province_id')
    cities = City.objects.filter(province_id=province_id)
    city_list = []
    for city in cities:
        city_list.append({'id': city.id, 'name': city.name})
    return JsonResponse({'cities': city_list})

4. 在 JavaScript 中监听省份下拉菜单的 change 事件，发送 Ajax 请求获取该省份下的城市列表，并将其填充到城市下拉菜单中。

$(document).ready(function() {
    $('#province').on('change', function() {
        var provinceId = $(this).val();
        if (provinceId) {
            $.ajax({
                url: '/get_cities/',
                data: {'province_id': provinceId},
                dataType: 'json',
                success: function(data) {
                    var citySelect = $('#city');
                    citySelect.empty();
                    citySelect.append('<option value="">选择城市</option>');
                    $.each(data.cities, function(index, city) {
                        citySelect.append('<option value="' + city.id + '">' + city.name + '</option>');
                    });
                    citySelect.prop('disabled', false);
                }
            });
        } else {
            $('#city').empty().prop('disabled', true);
        }
    });
});

在以上步骤中，注意需要在 urls.py 中注册 get_cities 视图函数的 URL。