Bootstrap-select not working with dynamically populated options

Answer 1

The problem here is that the plugin bootstrap-select is creating a new element (div) that has every class from your original element (select).

So when your code tries to append the options in the select using the css selector, you are both appending in the original element (select) and in the element that the plugin created (div), causing the erratic behavior.

You have many ways to prevent this behavior, one is to use the ID selector for example.

Here's a snippet a possible solution:

var provinceCssSelector = '#province';
var municipeCssSelector = '#city';
var provinceDefaultText = 'Provincia';
var municipeDefaultText = 'Municipio';

var provinces = [{
  name: '1',
  code: 1
}, {
  name: '2',
  code: 2
}, {
  name: '3',
  code: 3
}];

var municipes = [{
  name: '1-1',
  cod_prov: 1
}, {
  name: '1-2',
  cod_prov: 1
}, {
  name: '1-3',
  cod_prov: 1
}, {
  name: '2-1',
  cod_prov: 2
}, {
  name: '2-2',
  cod_prov: 2
}, {
  name: '2-3',
  cod_prov: 2
}, {
  name: '3-1',
  cod_prov: 3
}, {
  name: '3-2',
  cod_prov: 3
}, {
  name: '3-3',
  cod_prov: 3
}];

$().ready(function() {

  // Set default text
  $(provinceCssSelector).append($('').text(provinceDefaultText).attr('value', -1));
  $(municipeCssSelector).append($('').text(municipeDefaultText).attr('value', -1));

  // Populate province select
  $.each(provinces, function(number, province) {
    $(provinceCssSelector).append($('').text(province.name).attr('value', province.code));
  });

  // When selected province changes, populate municipe select
  $(provinceCssSelector).change(function() {
    var selectedProvince = this.value;
    $(municipeCssSelector).empty();
    $(municipeCssSelector).append($('').text(municipeDefaultText).attr('value', -1));
    $.each(municipes, function(number, municipe) {
      if (municipe.cod_prov == selectedProvince) {
        $(municipeCssSelector).append($('').text(municipe.name).attr('value', number.toString()));
      }
    });
    $(municipeCssSelector).selectpicker('refresh');
    $(municipeCssSelector).selectpicker('render');
  });
});

  

    
Select where happenings occurred
    

      
    
  
  

    
Select city
    

      
    
  

Hope it helps!