How to add option values on silviomoreto's Bootstrap-Select

Question

I used silviomoreto's bootstrap-select but I'm having problems. I have 2 Dropdowns (Select) a Region dropdown and Cities. Now, I have a jquery onchange function, the function will change the values in the cities dropdown depending on the region selected. Here's my code:

<select id="region" class="selectpicker"></select>
<select id="cities" class="selectpicker"></select>

$("#region").on('change', function () {
   $("#cities").html('<option>city1</option><option>city2</option>');
});

The problem is I think the compatibility? When I removed the class="selectpicker" it works fine, but I can't remove it because I used it for my dropdown ui. I checked the documentation in here https://developer.snapappointments.com/bootstrap-select/ but I can't find relevant answer to my question. Thanks!

Answer 1

Try selectpicker('refresh').

refresh()

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

Snippet

$("#cities")
   .html('<option>city1</option><option>city2</option>')
   .selectpicker('refresh');

Working Demo: http://jsfiddle.net/codeandcloud/nr54vx7b/