如何在x-editable表中重置/清除所有過濾器（select2，select，input）？

Question

我想為所有正在使用的過濾器設置一個重置/清除按鈕，但我無法弄清楚與該按鈕相關的點擊事件會觸發什么...例如：

為了重置所有這些select2，選擇和輸入字段並將所有過濾器恢復為空/空值，我需要觸發和/或附加並傳遞給什么？

Answer 1

單擊按鈕，您只需重置select2的值即可。

請參閱此編程方式重置它https://select2.github.io/examples.html#programmatic

按鈕只需重置所有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-editable重置字段進行操作 。

總有一種jQuery方法可以清除表單中的所有內容 -

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

Answer 2

這對我有用

當表單重置時，它將重置所有select2選擇的選項，您可以根據您的要求在單擊按鈕事件或任何其他事件上啟動此選項。

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

Answer 3

嘗試以下代碼重置一切。 在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>

Answer 4

根據您的屏幕截圖，我假設您的所有過濾器都是動態生成的。 要重置所有字段，您可以使用以下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重置多階段表單

Answer 5

最好的方法是刪除select 。

其工作原理如下： $('.select2-search-choice').remove();

要刪除選擇器，我訪問了選擇器的名稱。