Django如何点击按钮一键重置所有过滤器？

问题场景 #

我想实现点击按钮一键清除所有过滤器，现有代码如下：

Filters类（filters.py）

class Filters(django_filters.FilterSet):
    id = django_filters.NumberFilter(label=_("ID"))
    name = django_filters.TextFilter(label=_("Name"))

基础模板代码

<form id="filters-filters-form" action="javascript:;" onsubmit="onSubmit(this)" class="form form-inline main-filter">
    {% bootstrap_form filter.form layout='inline' %}
    <div>
        <button class="btn ml-auto mr-2" onclick="resetFilters()">Clear all</button>
        {% trans "Apply" as button_text %}
        {% bootstrap_button button_text button_class="btn-primary" %}
    </div>
</form>

当前的resetFilters函数

var resetFilters = function() {
    let formId = document.getElementById('filters-form')
    let formChildren = formId.childNodes;
    Array.from(formChildren).forEach(formChild => {
        formChild.val(null).trigger('change')
    });
}

需求：需要一个简便的重置方法，且作为可复用基础模板，不能依赖form-control的ID实现。

解决方案 #

这里有两种实用的实现方式，都不依赖控件ID：

方式一：原生表单重置（最简便）

如果页面加载时表单初始状态就是无过滤值的，直接用HTML原生的reset()方法即可，它会把表单恢复到加载时的初始状态，再手动触发控件的change事件让过滤器更新：

var resetFilters = function() {
    // 注意修正表单ID，原代码里ID是filters-filters-form
    const form = document.getElementById('filters-filters-form');
    form.reset();
    // 触发所有控件的change事件，确保过滤器感知到变化
    const formElements = form.querySelectorAll('input, select, textarea');
    formElements.forEach(el => el.dispatchEvent(new Event('change')));
}

方式二：强制清空所有值（无视初始值）

如果需要强制清空所有过滤值（不管页面加载时的默认值），可以遍历表单内所有控件，根据类型针对性清空：

var resetFilters = function() {
    const form = document.getElementById('filters-filters-form');
    const formElements = form.querySelectorAll('input, select, textarea');
    
    formElements.forEach(element => {
        switch(element.type) {
            case 'text':
            case 'number':
                element.value = '';
                break;
            case 'select-one':
                element.selectedIndex = 0;
                break;
            case 'select-multiple':
                Array.from(element.options).forEach(opt => opt.selected = false);
                break;
            case 'checkbox':
            case 'radio':
                element.checked = false;
                break;
            default:
                element.value = '';
        }
        element.dispatchEvent(new Event('change'));
    });
}

关键注意点 #

1. 原代码里表单ID是filters-filters-form，但原函数写的是filters-form，这会导致找不到元素，必须先修正ID匹配问题。
2. 原生reset()方法是恢复初始值，不是强制清空，如果表单加载时有默认过滤值，优先用方式二。

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