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

I want to have a reset/clear button for all the filters in use, but I can't figure out what to fire off on on-click event tied to that button... for example:

我想为所有正在使用的过滤器设置一个重置/清除按钮,但我无法弄清楚与该按钮相关的点击事件会触发什么...例如:

What would I have to fire off and/or attach & pass to what in order to reset all these select2, select and input fields and restore all the filters to null/empty values?

为了重置所有这些select2,选择和输入字段并将所有过滤器恢复为空/空值,我需要触发和/或附加并传递给什么?

5 个解决方案

#1

On click of your button, all you need is to reset the value of select2.

单击您的按钮,您只需重置select2的值。

See this programmatic way to reset it https://select2.github.io/examples.html#programmatic

请参阅此编程方式重置它https://select2.github.io/examples.html#programmatic

All you need for your button to reset all the select2 inputs instead of 1 as shown in the example.

按钮只需重置所有select2输入而不是1,如示例所示。

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

Just in case, you're using 3.5.x version, then there's small change as seen here http://select2.github.io/select2/#programmatic

为了以防万一,你使用的是3.5.x版本,那么这里看到的变化很小http://select2.github.io/select2/#programmatic

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

For resetting other values in x-editable you can follow this x-editable resetting fields.

要重置x-editable中的其他值,您可以按照此x-editable重置字段进行操作。

There's always a jQuery way to clearing everything in a form -

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

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

#2

This worked for me

这对我有用

It will reset all the select2 selected options when form is reset you can initiate this on click button event or any other event according to your requirements.

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

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

#3

try this below code to reset everything. found it on https://vitalets.github.io/x-editable/docs.html#newrecord

尝试以下代码重置所有内容。在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

As per your screenshot, i assume that all your filter are dynamically generated. To reset the all the field you can use the following jQuery code.

根据您的屏幕截图,我假设您的所有过滤器都是动态生成的。要重置所有字段,您可以使用以下jQuery代码。

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

If you have form then you can use this code :

如果您有表单,则可以使用以下代码:

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

Here is some more details that may work for you,

以下是一些可能对您有用的细节,

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

Please see this post for: Resetting a multi-stage form with jQuery

请参阅此帖子:使用jQuery重置多阶段表单

#5

-2

the best way is to remove the select.

最好的方法是删除选择。

That works as follows: $('.select2-search-choice').remove();

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

To remove the selector, I accessed the name of the selector.

要删除选择器,我访问了选择器的名称。

#1