在 Django 中，根据模型中其他字段中选择的值删除选择字段下拉列表中的选项

Posted 2023-02-24

【中文标题】在 Django 中，根据模型中其他字段中选择的值删除选择字段下拉列表中的选项

【英文标题】：In Django, remove options in a choice-field dropdown based on the value selected in other field in a model

【发布时间】：2021-12-13 10:27:49

【问题描述】：

我是 Django 新手，感谢任何帮助，如何根据前一个字段限制一个字段中的选择选项。例如，如果我为动物选择“狗”，我想从 FOOD_CHOICE 中删除“巧克力”。谢谢！！！

ANIMAL_CHOICE = (
     ('a','cat'),
     ('b','dog'),
     ('c','fish'),
)
FOOD_CHOICE = (
      ('a', 'chocolate'),
      ('b', 'kittySnack'),
      ('c', 'steak'),
)

class Animal(models.Model):
    animal = models.CharField(max_length=1, choices= ANIMAL_CHOICE)
    food   = models.CharField(max_length=1, choices= FOOD_CHOICE)

【问题讨论】：

这个最好在表格里申请，这个型号请加上你的表格代码

【参考方案1】：

As explained here，您应该在模型表单或模型清理方法中进行验证，并在那里提出ValidationError。

这里有一个例子，你可以override the clean method of your model's form:

forms.py

class AnimalForm(ModelForm):
    class Meta:
        model = Animal
        fields = "__all__"

    def clean(self):
        cleaned_data = super(AnimalForm, self).clean()
        animal = self.cleaned_data.get("animal")
        food = self.cleaned_data.get("food")
        if animal == "b" and food == "a": # Might not work, but this is the general idea
            raise forms.ValidationError("Chocolate can't be selected with Dogs")

N.B.：在我评论说它可能不起作用的那一行，你必须调试一下。我不记得（我现在无法测试）cleaned_data 是否返回元组或实际值，或人类可读的值。

现在，我猜您希望 html 中的选择能够动态更改。对于前端，您需要做一些 javascript。使用 JS 的方法有很多种，这里有一种：

（在您的模板中，<script> 标签之间）

var selectAnimal = document.getElementById("select-animal");
var selectFood = document.getElementById("select-food");

selectAnimal.addEventListener("change", function() 
    if(this.value == "a")
    
        
        // remove from select the "chocolate" option
        for (var i=0; i<selectFood.length; i++) 
            if (selectFood.options[i].text == 'chocolate')
                selectFood.remove(i);
        
    
    else 
        
        // checking if "chocolate" is in select or not
        let has_chocolate = false;
        for (var i=0; i<selectFood.options.length; i++)
            if (selectFood.options[i].text == "chocolate")
                has_chocolate = true;
            
        
        
        if (!has_chocolate) // if "chocolate" is missing
            option = document.createElement("option");
            option.text = "chocolate";
            option.value = "a";
            selectFood.add(option);
        
    
);