如何根据AJAX返回JSON为select的option动态添加样式并控制禁用

首先修正基础错误：你的HTML里下拉选项标签写错了，标准标签是<option>不是<options>，标签错误会导致所有JS选择器无法正常抓取选项，先修正HTML，同时直接在标签上加disabled属性实现初始禁用：

<select name="car_model" id="id_car_model" disabled>
<option value selected>----------</option>
<option value="1">520</option>
<option value="2">720</option>
<option value="3">301</option>
<option value="4">308</option>
</select>

如果你不想直接在HTML里写disabled，也可以在AJAX请求发送前用JS设置禁用：$('#id_car_model').prop('disabled', true)，两种方式效果一致。

接下来修改AJAX成功回调的逻辑，你已经能正常拿到后端返回的pk数据，只需要加选项过滤、解除禁用的逻辑即可，修改后的完整JS代码：

$.ajax({
    type: 'POST',
    url: 'car-model-ajax/',
    data: model_data,
    dataType: 'json',
    success: function (response) {
        var jsonModels = response.car_models
        var models = JSON.parse(jsonModels)
        // 提取所有有效pk，统一转字符串，避免和option的字符串类型value匹配时类型不兼容
        const validPks = models.map(el => String(el.pk))
        const $carModelSelect = $('#id_car_model')
        
        // 遍历所有选项做匹配
        $carModelSelect.find('option').each(function() {
            const currentOptionVal = $(this).val()
            // 跳过默认空选项（显示----------的首项），非空选项不在有效pk列表里就直接隐藏
            if (currentOptionVal && !validPks.includes(currentOptionVal)) {
                $(this).css('display', 'none')
            }
        })

        // 选项过滤完成后解除禁用
        $carModelSelect.prop('disabled', false)
    },
    error: function (response) {
        console.log(response)
        // 请求失败时保持下拉框禁用即可，可按需加错误提示
    },
})

逻辑说明 #

• pk统一转字符串：DOM节点的value属性读取结果默认是字符串类型，如果直接拿数字类型的pk做匹配，会出现1 !== "1"的类型不匹配问题，导致本该显示的选项被误隐藏。
• 默认空选项放行：首项的value是空字符串，判断时直接跳过，保留默认选择提示。
• 选项过滤完成后才解除禁用，保证用户在数据加载完成前无法操作下拉框。
• 匹配失败的选项直接添加display: none行内样式，和你要求的效果完全一致，示例场景下最终只会保留默认项、value=1、value=2三个选项，其余选项全部隐藏。

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