42

I am using Bootstrap-select plugin (https://silviomoreto.github.io/bootstrap-select/) for my dropdown select box. After I click a button, I want the box to refresh and the "selected" option to reset. This is the dropdown

<select id="dataPicker" class="selectpicker form-control">
  <option value="default" selected="selected">Default</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

And this is my attempt at it, does not work. Any ideas on how it should be?

$("#dataPicker option:selected").val('default');
$("#dataPicker").selectpicker("refresh");

4 Answers4

90

Without "option:selected"

$("#dataPicker").val('default');
$("#dataPicker").selectpicker("refresh");
Nedim Hozić
  • 1,871
  • 15
  • 15
  • 5
    $('.selectpicker').selectpicker('refresh'); works to reset the picker(s) on the page (I have several and this was the best choice). – Apps-n-Add-Ons Mar 12 '18 at 13:31
27

You can write it in one single line reduces extra piece of code.

$("#dataPicker").val('default').selectpicker("refresh");
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
fauz_sp
  • 271
  • 3
  • 2
1

you can easily solve this problem by adding the autocomplete attribute to the select-element and set it to "off".

<select id="dataPicker" class="selectpicker form-control" autocomplete="off">
  <option value="default" selected="selected">Default</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>
PeterPilz
  • 87
  • 12
0

Bootstrap Select 5 uses $('.selectpicker').selectpicker('deselectAll')

s k
  • 4,342
  • 3
  • 42
  • 61