Tom-Select не очищает входные данные при нажатии кнопки сброса
Я использую tom-select на моей форме django. На форме я также сделал кнопку сброса, чтобы очистить все поля ввода. Все значения ввода очищаются, когда я нажимаю на кнопку, кроме того, в котором используется 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'
),
....
том-селект на 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 с помощью кнопки сброса?
Я столкнулся с той же проблемой, и вот мое решение.
Я включаю tom-select для каждого элемента HTML, имеющего класс tom-select-enabled
.
Я использую класс tomselected
для получения всех элементов формы с включенным tom-select при сбросе и вызываю метод 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: "Vider" }
},
create: false,
persist: false
});
});
// Clear all TomSelect instances of forms on reset.
document.querySelectorAll("form").forEach((formElement) => {
formElement.addEventListener("reset", (event) => {
event.target
.querySelectorAll(".tomselected")
.forEach((tomselectedElement) => {
tomselectedElement.tomselect.clear();
});
});
});
});
Насколько мне удалось выяснить, событие reset
не запускается для элемента, когда TomSelect
инстанцируется.
Другая проблема заключается в том, что метод clear()
визуально опустошает поле tom-select, но если в исходном поле select
есть selected="selected"
<option>
, то он устанавливает значение select
в выбранный вариант по умолчанию.
Если подано два вопроса по теме:
- Включенное поле Tom Select не реагирует на события сброса формы #544.
- методclear() очищает видимое поле tom-select, но устанавливает поле select на выбранный по умолчанию вариант #545.
Я нашел несколько советов по очистке моего кода в Как очистить существующие (динамически созданные) экземпляры Tom-Select #170.