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?

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?

• javascript
• jquery
• jquery-select2
• x-editable

• 3 Are you able to create a jsfiddle or something ? – Jashwant Commented Aug 22, 2015 at 19:48
• @Crazy Serb Hi. Did you find anything regarding your question? I also want to reset all the fields, including input, select, select2. How to do that besides using individual ids of every field? Thanks in advance. – Vibhav Chaddha Commented Oct 7, 2019 at 13:10

5 Answers 5

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

See this programmatic way to reset it 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.

$('#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

$('#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.

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

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

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.

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

try this below code to reset everything. found it on 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>

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.

$( 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

the best way is to remove the select.

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

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