Django+AJAX动态下拉框：无子类时禁用二级下拉的实现方法

你可以通过在AJAX请求的回调逻辑中判断返回的子分类数据长度，来控制第二个下拉框的禁用状态，具体修改如下：

修改后的JavaScript代码 #

$("#id_general-collision_type").change(function () {
    const url = $("#form_incidentgeneral").attr("data-acc-url");
    const collisionId = $(this).val();
    // 缓存下拉框DOM对象，减少重复查询
    const subCategorySelect = $("#id_general-collision_subcategory");

    $.ajax({
        url: url,
        data: {
            'collision_type_id': collisionId
        },
        success: function (data) {
            let html_data = '<option value="">---------</option>';
            
            if (data.length > 0) {
                // 有子分类时，拼接选项并启用下拉框
                data.forEach(function (collision_subcategory) {
                    html_data += `<option value="${collision_subcategory.id}">${collision_subcategory.sub_category}</option>`;
                });
                subCategorySelect.prop('disabled', false);
            } else {
                // 无子分类时，禁用下拉框
                subCategorySelect.prop('disabled', true);
            }
            
            // 更新下拉框选项
            subCategorySelect.html(html_data);
        }
    });
});

关键逻辑说明 #

1. 缓存DOM对象：提前获取第二个下拉框的jQuery对象，避免每次回调都重复查询DOM，提升性能。
2. 判断子分类数量：通过data.length判断是否有返回的子分类数据，为空则说明当前选中的分类没有子项。
3. 控制禁用状态：使用prop('disabled', 状态)来切换下拉框的禁用/启用，这是jQuery控制表单元素状态的标准方式。
4. 统一更新选项：移除原代码中重复的html(data)调用，统一使用自己拼接的选项内容，避免逻辑冲突。

Django视图层配合说明 #

确保你的视图返回JSON格式的空数组当没有子分类时，这样前端才能正确判断：

from django.http import JsonResponse
from .models import CollisionSubcategory

def load_subcategories(request):
    collision_type_id = request.GET.get('collision_type_id')
    # 筛选对应父分类的子分类
    subcategories = CollisionSubcategory.objects.filter(
        collision_type_id=collision_type_id
    ).values('id', 'sub_category')
    # 返回JSON数组，safe=False允许非字典类型的JSON响应
    return JsonResponse(list(subcategories), safe=False)

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