Как reset/удалить все фильтры (select2, select, input) в x-редактируемой таблице?

Я хочу иметь кнопку reset/clear для всех используемых фильтров, но я не могу понять, что нужно отключить при нажатии на событие, связанное с этой кнопкой... например:

Что мне нужно было бы отключить и/или прикрепить и передать к тому, что для reset все эти select2, выбрать и ввести поля и восстановить все фильтры до нулевых/пустых значений?

Ответ 1

При нажатии на кнопку все, что вам нужно, это reset значение select2.

Смотрите этот программный способ reset it https://select2.github.io/examples.html#programmatic

Все, что вам нужно для кнопки reset для всех входов select2 вместо 1, как показано в примере.

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').val(null).trigger("change");
    $('#yourSecondSelect2').val(null).trigger("change");
    ....
});

На всякий случай вы используете версию 3.5.x, тогда там небольшое изменение, как показано здесь http://select2.github.io/select2/#programmatic

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').select2("val", "");
    $('#yourSecondSelect2').select2("val", "");
    ....
});

Для сброса других значений в x-editable вы можете следовать этим x-редактируемым полям сброса.

Всегда есть способ jQuery очистить все в форме -

$('#formName')[0].reset();

Ответ 2

Это сработало для меня

Он будет reset всеми выбранными параметрами select2, когда форма reset, вы можете инициировать это событие на кнопке кнопки или любое другое событие в соответствии с вашими требованиями.

$("#id").val(null).trigger("change");

Ответ 3

попробуйте этот код ниже reset. нашел его на https://vitalets.github.io/x-editable/docs.html#newrecord

<button id="reset-btn" class="btn pull-right">Reset</button>


<script>
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null)  //clear values
    .editable('option', 'pk', null)          //clear pk
    .removeClass('editable-unsaved');        //remove bold css

$('#save-btn').show();
$('#msg').hide();                
});
<script>

Ответ 4

В соответствии с вашим снимком экрана я предполагаю, что весь ваш фильтр динамически генерируется. Для reset всего поля вы можете использовать следующий код jQuery.

$( document ).ready(function() {
    $('body').on('click','#resetButtonSelector', function() {
       $("body select").select2("val", "");
       $("body input").val("");
       $('body select').val("")
    });
});

Если у вас есть форма, вы можете использовать этот код:

$( document ).ready(function() {
    $('body').on('click','#resetButtonSelector', function() {
       $("body select").select2("val", "");
       $('#formId')[0].reset();
    });
});

Вот несколько подробностей, которые могут сработать для вас,

$(':input','#formId')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

Пожалуйста, посмотрите это сообщение для: Сброс многоступенчатой формы с помощью jQuery

Ответ 5

лучший способ - удалить select.

Это работает следующим образом: $('.select2-search-choice').remove();

Чтобы удалить селектор, я обратился к имени селектора.