如何重置/清除 x-editable 表中的所有过滤器（select2、select、input）？答案

【问题标题】：How to reset/clear all filters (select2, select, input) in the x-editable table?如何重置/清除 x-editable 表中的所有过滤器（select2、select、input）？
【发布时间】：2015-11-12 02:08:49
【问题描述】：

我想为所有正在使用的过滤器设置一个重置/清除按钮，但我不知道在与该按钮相关的点击事件上触发什么...例如：

为了重置所有这些 select2、选择和输入字段并将所有过滤器恢复为 null/空值，我必须触发和/或附加并传递什么？

【问题讨论】：

你能创建一个 jsfiddle 什么的吗？
@Crazy Serb 嗨。你有没有发现任何关于你的问题？我也想重置所有的字段，包括input、select、select2。除了使用每个字段的单独 id 之外，如何做到这一点？提前致谢。

标签： javascript jquery jquery-select2 x-editable

【解决方案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 resetting fields。

总有一种 jQuery 方法可以清除表单中的所有内容 -

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

【讨论】：

【解决方案2】：

这对我有用

当表单被重置时，它将重置所有 select2 选择的选项，您可以根据您的要求在单击按钮事件或任何其他事件上启动此操作。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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');

请查看此帖子：Resetting a multi-stage form with jQuery

【讨论】：

【解决方案5】：

最好的方法是删除select。

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

为了移除选择器，我访问了选择器的名称。

【讨论】：