title: Bootstrap-select not working with dynamically populated options
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  var PS = (function(){
  var municipes = [{
   "cod_prov": "01",
   "cod_mun": "001",
   "id": 0,
   "name": "Alegría-Dulantzi"
  }, {
     "code": "47",
     "name": "VALLADOLID"
    }, {
     "code": "48",
     "name": "BIZKAIA"
    }, {
     "code": "49",
     "name": "ZAMORA"
    }, {
     "code": "50",
     "name": "ZARAGOZA"
    }, {
     "code": "51",
     "name": "CEUTA"
    }, {
     "code": "52",
     "name": "MELILLA"
    }];
  
  var provinceCssSelector = '.ps-prov';
  var municipeCssSelector = '.ps-mun';
  var provinceDefaultText = 'Provincia';
  var municipeDefaultText = 'Municipio';
  
  
  $().ready(function() {
   // Set default text
   $(provinceCssSelector).append($('&lt;option&gt;').text(provinceDefaultText).attr('value', -1));
   $(municipeCssSelector).append($('&lt;option&gt;').text(municipeDefaultText).attr('value', -1));
  
   // Populate province select
   $.each(provinces, function(number, province) {
    $(provinceCssSelector).append($('&lt;option&gt;').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($('&lt;option&gt;').text(municipeDefaultText).attr('value', -1));
    $.each(municipes, function(number, municipe) {
     if (municipe.cod_prov == selectedProvince) {
      $(municipeCssSelector).append($('&lt;option&gt;').text(municipe.name).attr('value', number.toString()));
       
     }
     
    });
    
     
    
   });
   $('.selectpicker').selectpicker('refresh');
   
   
   
  });
  
  }());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
   
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       
   
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
   
  &lt;/head&gt;
  &lt;body&gt;
  
   
             
    &lt;tr&gt;
              &lt;td&gt;Select where happenings occurred&lt;/td&gt;
              &lt;td&gt;
     
     &lt;select id="province" name="province" class="ps-prov selectpicker show-tick form-control" data-live-search="true" &gt;&lt;/select&gt;
  
    
     
    &lt;/td&gt;
          &lt;/tr&gt;
     
    &lt;tr&gt;
              &lt;td&gt;Select city&lt;/td&gt;
              &lt;td&gt;
     
     &lt;select id="city" name="city" class="ps-mun selectpicker show-tick form-control" data-live-search="true"&gt;&lt;/select&gt;
     &lt;/td&gt;
     
     &lt;/tr&gt;
    
    
    
    
   
    
    
   
      &lt;/table&gt;
   
  &lt;/form&gt;
  
  
   &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to use bootstrap-select to improve the style of one my projects but when the options of the select are built dynamically the plugin does not work and I do not find the error. I have included the <code>$('.selectpicker').selectpicker('refresh');</code> as proposed by this <a href="https://stackoverflow.com/questions/26205248/jquery-bootstrap-selectpicker-refreshing-lists-based-upon-previous-list-choice">answer</a>   but still I am not able to achieve what I want. The HTML is the following and works perfectly:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td&gt;Select where happenings occurred&lt;/td&gt;
    &lt;td&gt;
      &lt;select id="province" name="province" class="ps-prov selectpicker show-tick form-control" data-live-search="true"&gt;&lt;/select&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Select city&lt;/td&gt;
    &lt;td&gt;
      &lt;select id="city" name="city" class="ps-mun selectpicker show-tick form-control" data-live-search="true"&gt;&lt;/select&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The javascript works in the following way</p>
  
  <pre><code>var provinceCssSelector = '.ps-prov';
  var municipeCssSelector = '.ps-mun';
  var provinceDefaultText = 'Provincia';
  var municipeDefaultText = 'Municipio';
  
  
  $().ready(function() {
    // Set default text
    $(provinceCssSelector).append($('&lt;option&gt;').text(provinceDefaultText).attr('value', -1));
    $(municipeCssSelector).append($('&lt;option&gt;').text(municipeDefaultText).attr('value', -1));
  
    // Populate province select
    $.each(provinces, function(number, province) {
      $(provinceCssSelector).append($('&lt;option&gt;').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($('&lt;option&gt;').text(municipeDefaultText).attr('value', -1));
      $.each(municipes, function(number, municipe) {
        if (municipe.cod_prov == selectedProvince) {
          $(municipeCssSelector).append($('&lt;option&gt;').text(municipe.name).attr('value', number.toString()));
        }
      });
      $('.selectpicker').selectpicker('refresh');
    });
  });
  </code></pre>
  
  <p>Does anyone know how to make the combo select works?</p>