Html Django选项会根据男性/女性复选框自动更改。类别将根据性别选择显示

我在网上搜索过，但没有找到合适的。我希望有一个模型，它将有一组类别选择，这些类别将根据选择的是男性还是女性复选框/选择（以更合适的为准）而改变

在models.py中

class MyModel(models.Model):

    MALE_CATEGORIES = {

        ('Male Category 1', 'Male Category 1'),
        ('Male Category 2', 'Male Category 2'),
        ('Male Category 3', 'Male Category 3'),

    }

    FEMALE_CATEGORIES = {

        ('Female Category 1', 'Female Category 1'),
        ('Female Category 2', 'Female Category 2'),
        ('Female Category 3', 'Female Category 3'),

    }

    # Male/Female option as either choices or checkboxes depending on whichever one is more suitable
    gender =

    # Either MALE_CATEGORIES or FEMALE_CATEGORIES
    # Depending on gender
    categories = models.CharField(max_length=18, choices=)

在forms.py中

class MyModelForm(forms.ModelForm):

    class Meta:
        model = MyModel
        fields = [
            'gender',
            'categories',
        ]

class MyModelForm(ModelForm):

    class Meta:
        model = MyModel

        fields = [

            'name',
            'gender',
            'category',

        ]

---

我就是这样做的。它表示使用Django和JQuery创建依赖下拉列表的基本方法。 在models.py中，我定义了所有选项，如下所示

GENDER_CHOICES = [
    ('Male', 'Male'),
    ('Female', 'Female'),
]

MALE_CATEGORIES = [
    ('Male Category 1', 'Male Category 1'),
    ('Male Category 2', 'Male Category 2'),
    ('Male Category 3', 'Male Category 3'),
]

FEMALE_CATEGORIES = [
    ('Female Category 1', 'Female Category 1'),
    ('Female Category 2', 'Female Category 2'),
    ('Female Category 3', 'Female Category 3'),
]

定义了一个方法（get_all_choices）来追加并返回所有（男性_类别和女性_类别）选项，如下所示。调用该方法，将所有选项分配给类别字段MyModel的choices变量

def get_all_choices():
    all_choices = MALE_CATEGORIES
    all_choices+=FEMALE_CATEGORIES

    return all_choices

class MyModel(models.Model):
    name = models.CharField(max_length=50, unique=True)
    gender = models.CharField(max_length=7, choices=GENDER_CHOICES)
    category = models.CharField(max_length=20, choices=get_all_choices())

在forms.py中

class MyModelForm(forms.ModelForm):

    class Meta:
        model = MyModel
        fields = [
            'gender',
            'categories',
        ]

class MyModelForm(ModelForm):

    class Meta:
        model = MyModel

        fields = [

            'name',
            'gender',
            'category',

        ]

以表单作为上下文（在本例中为mymodelform），通过某个视图呈现html。 在我的html中

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<form class="form-class" action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {% for field in mymodelform %}

        <p>
            {{ field.label_tag }}
            {{ field }}

            {% if field.help_text %}

                <small style="color: black;"> {{ field.help_text }} </small>

            {% endif %}

            {% for error in field.errors %}

                <p style="color: red;"> {{ error }} </p>

            {% endfor %}

        </p>

    {% endfor %}

    <button class="btn btn-outline-primary" type="submit">Join</button>

</form>

<script>

    $(document).ready( function() {

        $("#id_category").hide();

        $("#id_gender").on('change', function(){

            var gender = $("#id_gender").val();

            if(gender == 'Male'){

                $('#id_category').empty();
                $("#id_category").show();

                var maleCategories = ['Male Category 1', 'Male Category 2', 'Male Category 3'];
                var length = maleCategories.length;

                var i;
                for(i=0; i < length; i++){
                    maleCategory = maleCategories[i];
                    $('#id_category').append(

                        `
                        <option value="${maleCategory}">
                            ${maleCategory}
                        </option>
                        `

                    );
                }

            }
            else if(gender == 'Female'){

                $('#id_category').empty();
                $("#id_category").show();

                var femaleCategories = ['Female Category 1', 'Female Category 2', 'Female Category 3'];
                var length = femaleCategories.length;

                var i;
                for(i=0; i < length; i++){
                    femaleCategory = femaleCategories[i];
                    $('#id_category').append(

                        `
                        <option value="${femaleCategory}">
                            ${femaleCategory}
                        </option>
                        `

                    );
                }

            }
            else{

                $('#id_category').empty();

            }

        });

    });

</script>

{%csrf_令牌%}
{mymodelform%中字段的%s}

{{field.label_tag}
{{field}}
{%if field.help_text%}
{{field.help_text}
{%endif%}
{%字段中有错误。错误%}
{{error}
{%endfor%}

{%endfor%}
参加
$（文档）.ready（函数（）{
$（“#id_类别”）.hide（）；
$（“#id_性别”）。关于（'change'，function（）{
var性别=$（“#id_性别”）.val（）；
如果（性别=‘男性’）{
$（'#id_category'）。空（）；
$（“#id_category”）.show（）；
var maleCategories=[‘男性1类’、‘男性2类’、‘男性3类’]；
变量长度=1.2.1.1.1.2.2.2.2.1.2.2.2.2.2.2；
var i；
对于（i=0；i