Django 管理面板：如果在下拉列表中选择了特定值，则显示/隐藏字段答案

【问题标题】：Django Admin Panel: Show/Hide Fields If Specific Value Is Selected In A DropdownDjango 管理面板：如果在下拉列表中选择了特定值，则显示/隐藏字段
【发布时间】：2021-05-29 10:38:47
【问题描述】：

我做错了什么？
在 django 管理面板中，我想根据选择下拉菜单显示/隐藏字段。此外，选择下拉菜单位于父外键相关模型上，要显示/隐藏的字段位于子模型中或作为堆叠内联。
我关注了这个solution(stack overflow)，但没有成功。

models.py

from django.db import models

CHOICES = (
        ('video', 'Video'),
        ('text', 'Text'),
        ('question', 'Question'),
)


class Section(models.Model):
    content_type = models.CharField(max_length=32)

    @property
    def contents(self):
        return self.content_set.all()

class Content(models.Model):
    content = models.ForeignKey(Section, on_delete=models.DCASCADE)
    video = models.FileField()
    text = models.TextField()
    question = models.CharField(max_length=512)

admin.py

from django.contrib import admin

from .models import Section, Content
from .forms import DropdownModelForm


class ContentInline(admin.StackedInline):
    model = Content
    fieldsets = (
        (None, {
            'fields': (('video',),),
            'classes': ('vid',)
        }),
        (None, {
            'fields': (('text',),),
            'classes': ('txt',)
        }),
        (None, {
            'fields': (('question',),),
            'classes': ('ques',)
        })
    )

    class Media:
        js = ('one/js/base.js',)

@admin.register(Section)
class SectionAdmin(admin.ModelAdmin):
    form = DropdownModelForm
    inlines = (ContentInline,)

forms.py

from django import forms
from .models import Section, CHOICES

class DropdownModelForm(forms.ModelForm):

    class Meta:
        model = Section
        fields = ('content_type',)
        widgets = {
            'content_type': forms.Select(choices=CHOICES)
        }

base.js

(function($) {
    $(function() {
        var selectField = $('#id_content_type'),
            verified_1 = $('.vid'),
            verified_2 = $('.txt'),
            verified_3 = $('.ques');

        function toggleVerified(value) {
            if (value === 'video') {
                verified_1.show();
                verified_2.hide();
                verified_3.hide();
            } else if (value === 'text') {
                verified_1.hide();
                verified_2.show();
                verified_3.hide();
            } else if (value === 'question') {
                verified_1.hide();
                verified_2.hide();
                verified_3.show();
            }
        }

        // show/hide on load based on pervious value of selectField
        toggleVerified(selectField.val());

        // show/hide on change
        selectField.change(function() {
            toggleVerified($(this).val());
        });
    });
})(django.jQuery);

settings.py

from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent
.
.
.

INSTALLED_APPS = [
    'one.apps.OneConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
.
.
.

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

再次，我做错了什么？
在 django 管理面板中，我想根据选择下拉菜单显示/隐藏字段。此外，选择下拉菜单位于父外键相关模型上，要显示/隐藏的字段位于子模型中或作为堆叠内联。
我关注了这个solution(stack overflow)，但没有成功。

非常感谢您花费宝贵的时间并查看我糟糕的代码

【问题讨论】：

标签： python django django-admin django-modeladmin

【解决方案1】：

将 javascript 文件作为admin.py 中的列表传递解决了这个问题。

class Media:
        js = ["one/js/base.js",]

另外，不知道为什么 jquery 不能正常工作。因此，为此将您的 javascript 包装在 jQuery(document).ready(function ($) { ...your javascript... }); 中，作为

jQuery(document).ready(function ($) {
    (function ($) {
        $(function () {
            var selectField = $('#id_content_type'),
                verified_1 = $('.vid'),
                verified_2 = $('.txt'),
                verified_3 = $('.ques');

            function toggleVerified(value) {
                if (value === 'video') {
                    verified_1.show();
                    verified_2.hide();
                    verified_3.hide();
                } else if (value === 'text') {
                    verified_1.hide();
                    verified_2.show();
                    verified_3.hide();
                } else if (value === 'question') {
                    verified_1.hide();
                    verified_2.hide();
                    verified_3.show();
                }
            }

            // show/hide on load based on pervious value of selectField
            toggleVerified(selectField.val());

            // show/hide on change
            selectField.change(function () {
                toggleVerified($(this).val());
            });
        });
    })(django.jQuery);
});

【讨论】：