Doesn't reset on form reset

[ouroborus]

When you reset the form (via reset button), the underlying <select> resets, but the control doesn't update to match.

[ubeyou]

try this

$('[type=reset]').click(function() {
            $('#status').selectpicker('val','your_default_value');
        });

[ouroborus]

The default value is different across several elements. This works for me:

$('form').on('reset', function(event){
  $('.selectpicker',this).each(function(index, element){
    var $this = $(this);
    setTimeout(function(){
      $this.selectpicker('val',$this.val());
    },0);
  });
});

Still, I believe there should be some sort of integration such that the control behaves as the control it overrides.

[caseyjhol]

This should work:

$('form').on('reset', function() {
  setTimeout(function() {
    $('.selectpicker').selectpicker('refresh');
  });
});

[ouroborus]

My understanding is that you can have more than one form on a page and that reset buttons (or reset events) only reset the form they are associated with. Your code would reset selectpicker items outside of just those associated with the form that the particular reset button (or reset event) is associated with.

Seperately, I do see that you're using a different command, 'refresh', to selectpicker.

[ouroborus]

Ah, I see... Slight modification to take multiple forms into account as well as dropping the each (as @caseyjhol suggests):

$('form').on('reset', function() {
  var _this = this;
  setTimeout(function() {
    $('.selectpicker',_this).selectpicker('refresh');
  });
});

[giro83]

I like this solution:

$('.selectpicker').selectpicker('refresh');

and I am using it successfully (thanks, caseyjhol).

But I agree with previous comments that the regular Reset button should work out of the box with bootstrap-select. It would be nice if bootstrap-select could be improved so that no additional fiddling is necessary.

[Roukmouth]

+1

[aval-sarri]

+1

[Jogai]

Please release this. Its default behaviour, and a long standing issue...

[caseyjhol]

This change will be a part of the v1.14.0 release. This issue will be updated after it's made available.

[caseyjhol]

Released in v1.14.0-beta!

[soyxan]

For me is still not working, when I call $('#myform')[0].reset(); all the standard elements inside the form are reseted but not the multiselect, it still show the values separated by comma.

I tried with $('.selectpicker').selectpicker('refresh'); but it is not working.

I am on bootstrap@4.5.3 + bootstrap-select@1.14.0-beta

[caseyjhol]

@soyxan Can you link me to an example?

[soyxan]

In the following link you can check 2 issues I am facing:

• mobile=true makes the dropdown unusable in Chrome desktop Issue with Mobile, Chrome f12 and multiple Select #2557
• reset does not work as expected

https://codepen.io/soyxan/pen/JjbwzKR

Thanks!

[soyxan]

Why is this issue closed, both of the issues on my previous post are still not solved, right?

Thanks!

In the following link you can check 2 issues I am facing:

• mobile=true makes the dropdown unusable in Chrome desktop Issue with Mobile, Chrome f12 and multiple Select #2557
• reset does not work as expected

https://codepen.io/soyxan/pen/JjbwzKR

Thanks!

[caseyjhol]

@soyxan In your example, you're not calling reset(), you're calling reset, which is why it's not working. Also, mobile=true opens the native select menu. On desktop, for multiple selects, there is no menu, so the menu doesn't open up. That's why it's a feature designed for use on mobile devices.