Null Reference Null Reference - 2 months ago 13
HTML Question

Bootstrap: select/option list doesn't get refreshed after programmatically adding item

I have the following select/option

<select class="bs-select form-control">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>


In my script section, I have this, which works fine. The styles are being applied

$(document).ready(function () {
$('.bs-select').selectpicker();
});


I have a button that does this:

$('.bs-select').append($('<option>', {
value: 0,
text: "test"
}));


However my select list isn't refreshed.

I tried adding

$('.bs-select').selectpicker();


after the append but it still doesn't work.

My select list gets refreshed if I remove the
$('.bs-select').selectpicker()
in
$(document).ready


How can I get my list to refresh after adding an item?

Answer

Use refresh after adding new option

$('.bs-select').selectpicker('refresh');