Django Admin/表单中按关联字段筛选ManyToMany字段的实现方案

以下是具体实现方案，分为自定义表单添加筛选框和前端JS实现动态筛选两部分：

1. 自定义ModelForm添加Genre筛选框 #

在forms.py中创建Location的自定义表单，添加一个非模型绑定的Genre选择字段，用于筛选Boardgame：

from django import forms
from .models import Location, Genre, Boardgame

class LocationAdminForm(forms.ModelForm):
    # 添加Genre筛选字段，空选项设为"全部"
    genre_filter = forms.ModelChoiceField(
        queryset=Genre.objects.all(),
        required=False,
        label="按游戏类型筛选",
        empty_label="全部"
    )

    class Meta:
        model = Location
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 初始化时保留已选中的Boardgame
        if self.instance.pk:
            self.fields['boardgame'].initial = self.instance.boardgame.all()

2. 配置Django Admin并引入前端逻辑 #

在admin.py中注册Location时使用自定义表单，同时通过Media类引入自定义JS文件：

from django.contrib import admin
from .models import Location, Boardgame, Genre
from .forms import LocationAdminForm

class LocationAdmin(admin.ModelAdmin):
    form = LocationAdminForm
    # 保持原有的水平筛选器布局
    filter_horizontal = ('boardgame',)

    class Media:
        # 引入自定义JS，路径根据你的静态文件目录调整
        js = ('admin/js/boardgame_filter.js',)

admin.site.register(Location, LocationAdmin)
admin.site.register(Boardgame)
admin.site.register(Genre)

3. 编写前端筛选逻辑 #

根据数据量大小，提供两种实现方案：

方案一：前端本地筛选（适合数据量小的场景） #

在静态文件目录下创建admin/js/boardgame_filter.js，直接在前端过滤选项：

document.addEventListener('DOMContentLoaded', function() {
    const genreSelect = document.getElementById('id_genre_filter');
    const boardgameSelects = document.querySelectorAll('#id_boardgame_from, #id_boardgame_to');

    // 保存所有Boardgame选项的原始数据
    const originalOptions = {};
    boardgameSelects.forEach(select => {
        originalOptions[select.id] = Array.from(select.options).map(opt => ({
            value: opt.value,
            text: opt.text,
            genreId: opt.dataset.genreId
        }));
    });

    genreSelect.addEventListener('change', function() {
        const selectedGenreId = this.value;
        boardgameSelects.forEach(select => {
            select.innerHTML = '';
            originalOptions[select.id].forEach(opt => {
                if (!selectedGenreId || opt.genreId === selectedGenreId) {
                    const option = document.createElement('option');
                    option.value = opt.value;
                    option.text = opt.text;
                    select.appendChild(option);
                }
            });
        });
    });
});

需要在LocationAdminForm的__init__方法中给Boardgame选项添加data-genre-id属性：

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    # 给每个Boardgame选项添加genre-id数据属性
    self.fields['boardgame'].widget.choices = [
        (game.id, game.name, {'data-genre-id': game.genre.id})
        for game in Boardgame.objects.all()
    ]
    if self.instance.pk:
        self.fields['boardgame'].initial = self.instance.boardgame.all()

方案二：AJAX动态加载（适合数据量大的场景） #

通过后端接口获取筛选后的Boardgame列表，更新选项：

document.addEventListener('DOMContentLoaded', function() {
    const genreSelect = document.getElementById('id_genre_filter');
    const boardgameFrom = document.getElementById('id_boardgame_from');

    genreSelect.addEventListener('change', function() {
        const genreId = this.value;
        fetch(`/admin/your_app/boardgame/filter/?genre=${genreId}`)
            .then(response => response.json())
            .then(data => {
                boardgameFrom.innerHTML = '';
                data.forEach(game => {
                    const option = document.createElement('option');
                    option.value = game.id;
                    option.text = game.name;
                    boardgameFrom.appendChild(option);
                });
            });
    });
});

对应的，在views.py中添加处理AJAX请求的视图：

from django.http import JsonResponse
from django.contrib.admin.views.decorators import staff_member_required
from .models import Boardgame

@staff_member_required
def filter_boardgames_by_genre(request):
    genre_id = request.GET.get('genre')
    if genre_id:
        boardgames = Boardgame.objects.filter(genre_id=genre_id)
    else:
        boardgames = Boardgame.objects.all()
    data = [{'id': game.id, 'name': game.name} for game in boardgames]
    return JsonResponse(data, safe=False)

在项目urls.py中添加路由：

from django.contrib import admin
from django.urls import path
from your_app.views import filter_boardgames_by_genre

urlpatterns = [
    path('admin/', admin.site.urls),
    path('admin/your_app/boardgame/filter/', filter_boardgames_by_genre, name='filter_boardgames'),
]

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