Javascript 如何重置/清除 x 可编辑表中的所有过滤器(选择 2、选择、输入)?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32084259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:35:31  来源:igfitidea点击:

How to reset/clear all filters (select2, select, input) in the x-editable table?

javascriptjqueryjquery-select2x-editable

提问by Crazy Serb

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:

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

enter image description here

在此处输入图片说明

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、select 和 input 字段并将所有过滤器恢复为空/空值,我必须触发和/或附加并传递什么?

回答by Bikas

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.xversion, 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 reset fields

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

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

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

回答by gaurav

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"); 

回答by J Santosh

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>

回答by Bhavin Solanki

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

根据您的屏幕截图,我假设您的所有过滤器都是动态生成的。要重置所有字段,您可以使用以下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 重置多阶段表单

回答by Cristian Milciades Llanes

the best way is to remove the select.

最好的方法是删除select.

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

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

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

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