Django表单点击重置按钮时Tom-Select输入框无法清空如何解决

在Django表单中使用Tom-Select组件时，表单配置的type="reset"重置按钮点击后，除Tom-Select渲染的选择字段外，其余原生输入字段均可正常清空。
页面初始化逻辑中调用的item_select.clear()可以正常清空选择框，但重置按钮触发时无法同步清空Tom-Select的已选值。

相关代码 #

form.py 表单定义 #

class ItemInputForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(ItemInputForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Row(
                ....
                Column('item', css_class = 'col-md-4'),
                css_class = 'row'
                ),
                ....
            Div(
                HTML('<button type="submit" class="btn btn-danger col-md-4 me-4"><i class="fa-solid fa-print"></i> Print</button>'),
                HTML('<button type="reset" class="btn btn-warning col-md-4"><i class="fa-solid fa-rotate-left"></i> Reset</button>'),
                css_class = 'text-center'
                ),
                ....

模板中Tom-Select初始化代码 #

$(document).ready(function()
    {
      var item_select = new TomSelect("#id_item",{
        create: false,
        placeholder: 'Search',
        valueField: 'value',
        searchField: 'text',
        maxItems: 1,
        closeAfterSelect: true,
        render: {
              option: function(data, escape) {
                  return '<div>' + '<span class="text">' + escape(data.text) + '</span>' + '<span class="value">' + escape(data.value) + '</span>' + '</div>';
            },
          item: function(data, escape) {
                  return '<div title="' + escape(data.value) + '">' + escape(data.text) + '</div>';
                },
          },
      });
      item_select.clear();

原生表单的reset事件只会重置浏览器原生输入、选择元素的值，Tom-Select是在原生select元素之上渲染的自定义UI组件，内部状态独立维护，不会自动响应原生表单的重置动作，需要手动绑定事件触发清空逻辑。

监听Tom-Select所属表单的reset事件，在事件触发时调用TomSelect实例的clear()方法即可，单实例场景修改后的初始化代码如下：

$(document).ready(function()
{
  var item_select = new TomSelect("#id_item",{
    create: false,
    placeholder: 'Search',
    valueField: 'value',
    searchField: 'text',
    maxItems: 1,
    closeAfterSelect: true,
    render: {
          option: function(data, escape) {
              return '<div>' + '<span class="text">' + escape(data.text) + '</span>' + '<span class="value">' + escape(data.value) + '</span>' + '</div>';
        },
      item: function(data, escape) {
              return '<div title="' + escape(data.value) + '">' + escape(data.text) + '</div>';
            },
      },
  });
  // 初始化清空
  item_select.clear();

  // 绑定表单重置事件
  $('#id_item').closest('form').on('reset', function() {
    // 加setTimeout等待原生重置逻辑执行完成，避免状态冲突
    setTimeout(() => {
      item_select.clear();
    }, 0);
  });
});

如果页面存在多个Tom-Select实例，可以用全局统一绑定的方式，不需要逐个实例配置：

document.querySelectorAll('form').forEach(form => {
  form.addEventListener('reset', () => {
    setTimeout(() => {
      // 遍历所有TomSelect实例，清空当前表单内的实例
      for (const key in TomSelect.instances) {
        const instance = TomSelect.instances[key];
        if (form.contains(instance.input)) {
          instance.clear();
        }
      }
    }, 0)
  })
})

注意：如果需求是重置到表单初始值而非完全清空，把clear()替换为setValue(初始值)即可。

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