Search code examples
javascriptformsfilterreset

Symfony ResetType: reset dropdown selection

I added a "Reset Filter" button and it's perfectly doing what it promised, so whenever it's clicked, all the selected filters are reset. However, there's one thing that's still bothering me, concering dropdowns I use for filtering. When something is selected in that dropdown and I hit the "reset" button, the dropdown still shows the selected values. Only when opening the dropdown, I see that there is actually nothing selected. issue I added the following screenshot, to show what I mean. That's the situation AFTER I hit the "Reset filter" button, so the resetting of the dropdown worked (no value is selected) but it's still displaying "BR" as selected.. And if I would now select another value of that dropdown (e.g. CA) and then applied the filters both (BR and CA) would be selected.. So what I thought is, that I need an ajax that's reloading the page after I clicked "Reset filter"? or is there a javascript that's handling the reset? I'm kind of lost.

Btw. I'm using the bootstrap-multiselect.js for that dropdown!

      $('#document_filter_markets').multiselect({
    enableCaseInsensitiveFiltering: true, includeSelectAllOption: true, nonSelectedText: 'Select Markets',
    maxHeight: 200
  });

Any ideas how to clear everything?

Solution

  • I finally found an answer myself.

    I added a reset-button:

      <input type="reset" id="resetter" class="btn-primary btn btn-xs" value="Reset All"/>

    and then added some javascript to that button to uncheck everything and then refresh the dropdown:

        $("#resetter").click(function () {      
    $('option', $('#document_filter_markets')).each(function(element) {
    $(this).removeAttr('selected').prop('selected', false);
      });
      $("#document_filter_markets").multiselect('refresh');
});

    Hope it helps!