Tom-Select在表单重置时清空输入字段的解决方案

<!-- 示例HTML结构 (假设这是您的Django表单中的一个字段) -->
<form id="myForm">
    <!-- ... 其他表单字段 ... -->
    <select id="id_item" class="tom-select-enabled" name="item">
        <option value="">请选择</option>
        <option value="1">选项A</option>
        <option value="2">选项B</option>
    </select>
    <!-- ... 其他表单字段 ... -->
    <button type="submit" class="btn btn-danger">提交</button>
    <button type="reset" class="btn btn-warning">重置</button>
</form>

document.addEventListener('DOMContentLoaded', function() {
    // 遍历所有带有 'tom-select-enabled' 类的元素并初始化Tom-Select
    document.querySelectorAll(".tom-select-enabled").forEach((tomSelectElement) => {
        console.log(`正在为 #${tomSelectElement.id} 启用 Tom-Select`);
        new TomSelect(tomSelectElement, {
            create: false, // 不允许用户创建新选项
            persist: false, // 确保在Tom-Select被移除时，原始select元素的值不会被保留
            placeholder: '搜索...', // 占位符文本
            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>';
                },
            },
            // 其他Tom-Select配置...
        });
    });

    // ... (接下来的步骤二代码)
});

document.addEventListener('DOMContentLoaded', function() {
    // ... (步骤一的Tom-Select初始化代码) ...

    // 遍历所有表单，为每个表单添加重置事件监听器
    document.querySelectorAll("form").forEach((formElement) => {
        formElement.addEventListener("reset", (event) => {
            // 获取当前表单中所有带有 'tomselected' 类的元素
            // 'tomselected' 类由Tom-Select在初始化后自动添加
            event.target.querySelectorAll(".tomselected").forEach((tomselectedElement) => {
                // 访问DOM元素上的 'tomselect' 属性，它存储了TomSelect实例
                tomselectedElement.tomselect.clear();
            });
            console.log(`表单 #${formElement.id} 已重置，Tom-Select字段已清空。`);
        });
    });
});