javascript - 为什么我的 Django 表单显示选择不可用错误？

Question

我正在尝试在 Django 模板中构建动态表单。

我有两个下拉选项。当用户在第一个下拉列表中选择一个选项时，第二个下拉列表中的可用选项会动态更改。这是我用来更改第二个下拉元素中的选择的 jQuery 代码。

$(document).on("change", "[id^=id_form][id$=brand]", function() {
    var $value = $(this).val();

    var $id_prefix = $(this).attr('id').slice(0, -5);
    $auto_type = $("#" + $id_prefix + "auto_type");

    $.ajax({
        type: 'GET',
        url: '/europarts/filter/auto/type/with/brand/' + String($value),

        success: function(data) {
            $auto_type.html(data);
        }
    });
});

您可以看到它从链接中获取一些 HTML，这基本上是一堆将替换当前选项的选项。这是代码:

{% for auto_type in auto_types %}
    <option value="{{ auto_type.id }}">{{ auto_type.name }}</option>
{% endfor %}

这是我的表格:

class ListForm(forms.ModelForm):

    class Meta:
        model = List
        fields = ['ref_no']


class ProductCreateForm(forms.Form):
    brand = forms.ModelChoiceField(queryset=Brand.objects.all(), initial=Brand.objects.first())
    auto_type = forms.ModelChoiceField(queryset=AutoType.objects.filter(brand=Brand.objects.first()), empty_label=None)
    part_no = forms.CharField(max_length=50)
    description = forms.CharField(max_length=255)
    quantity = forms.IntegerField()
    unit = forms.CharField(max_length=20, initial='piece(s)')
    cost_price = forms.IntegerField(required=False)
    selling_price = forms.IntegerField(required=False)

我正在使用动态表单集 jquery 库来保存带有列表的多个产品。

到目前为止效果很好!

但是，在我更改这样的选项并尝试提交表单后，表单页面会再次加载第二个下拉列表中的默认选项，而不是更改后的选项，并显示错误:

Select a valid choice. That choice is not one of the available choices.

这是提交表单时的request.POST值。

<QueryDict: {'form-MAX_NUM_FORMS': ['1000'], 'form-1-description': ['lskdjf'], 'form-1-auto_type': ['3'], 'form-MIN_NUM_FORMS': ['0'], 'form-0-quantity': ['1'], 'form-0-brand': ['2'], 'form-0-part_no': ['293847'], 'form-0-auto_type': ['2'], 'form-0-unit': ['piece(s)'], 'form-0-description': ['slkdfj'], 'form-1-part_no': ['928374'], 'form-TOTAL_FORMS': ['2'], 'form-1-quantity': ['1'], 'form-INITIAL_FORMS': ['0'], 'ref_no': ['REF230498203948'], 'csrfmiddlewaretoken': ['WYN08Hi2YhwTSKPS8EnLaz94aOz33RVfFMjwYeHr3rMxBImxn7ggSLYHwguIbuL0'], 'form-1-brand': ['2'], 'form-1-unit': ['pieces']}>

您可以看到 'form-1-auto_type': ['3'] 原来是 'form-1-auto_type': ['1'] 。原始值存在时表单提交，但动态改变值后却显示上述错误。

第二个下拉列表中会显示此错误。我该如何解决这个问题？

Answer 1

验证表单时，它会检查该选项是否存在于字段的选择中，在本例中:

queryset=AutoType.objects.filter(brand=Brand.objects.first())

仅当您从第一个品牌中选择一个选项时，它才有效。为了使其工作，您需要在验证数据之前更新 auto_type 字段的选择，或者不将 auto_type 的选择限制为任何品牌，然后在页面加载时更新 JavaScript 中的 select 元素以仅显示第一品牌的选项。