jquery 点击重置按钮时，Tom-Select不会清除输入

xkrw2x1b 于 2022-12-22 发布在 jQuery

关注(0)|答案(1)|浏览(234)

我在django表单上使用了tom-select，在表单上我还做了一个reset按钮来清除所有的输入字段，当我点击这个按钮时，所有的输入值都被清除了，除了使用tom-select的那个。
第一个月

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'
                ),
                ....

在template上进行汤姆选择

$(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();

刷新页面时，由于item_select.clear()的原因，输入栏被清除，但如果我想用重置按钮清除，输入栏就不能工作了，如何用重置按钮清除tom-select输入？

jquery

来源：https://stackoverflow.com/questions/72710907/tom-select-wont-clear-input-when-reset-button-is-clicked

1条答案

按热度按时间

wpx232ag1#

我也遇到过同样的问题，这是我的解决方案。
我为每个具有tom-select-enabled类的HTML元素启用tom-select，将每个创建的TomSelect示例添加到form元素的数组中，并向form添加一个reset事件侦听器，该侦听器在form的每个TomSelect示例上调用clear()。

document.addEventListener('DOMContentLoaded', function() {
    // Select all elements having the class 'tom-select-enabled', and enable TomSelect for these elements.
    document.querySelectorAll('.tom-select-enabled').forEach((tomSelectElement) => {
        console.log(`Enabling tom-select for #${tomSelectElement.id}`);
        var tomSelectItem = new TomSelect(tomSelectElement,{
            plugins: {
                'clear_button': { 'title': 'Clear', },
            },
            create: false,
            persist: false,
            sortField: {field: "text"}
        });

        // Check if this form has a TomSelect instances list.
        if(! tomSelectElement.form.hasOwnProperty('tomSelectInstances')) {
            // Initialize the form TomSelect instances list.
            tomSelectElement.form.tomSelectInstances = [];

            // Clear all TomSelect instances of this form on reset.
            tomSelectElement.form.addEventListener("reset", function() {
                this.tomSelectInstances.forEach((tomSelectItem) => { tomSelectItem.clear(); });
            });
        }

        // Add the new TomSelect instance to this form instances list.
        tomSelectElement.form.tomSelectInstances.push(tomSelectItem);
    });
});

使用tomSelectElement.tomselect可能有一种方法可以做到这一点，但是，据我所知，一旦示例化了TomSelect，就不会为元素触发reset事件。

赞(0）回复(0）举报 2022-12-22

我来回答

jquery 点击重置按钮时，Tom-Select不会清除输入

1条答案

相关问题

热门标签

最新问答