title: Loading Bootstrap select-picker using AJAX
body: <p>I have a similar problem to <a href="https://stackoverflow.com/questions/26191920/ajax-does-not-work-with-bootstrap-select">this</a> and <a href="https://stackoverflow.com/questions/23399676/issue-on-loading-bootstrap-select-options-through-ajax-post">this one</a>. I've tried all the solutions that are described in the comments. And got to a point where it sort of works. </p>
  
  <p>My problem, when I select a option from <code>#main_cat</code> the content for <code>.sub_cat</code> is loaded the first time (AJAX is loading correctly). But if I select another option from the <code>#main_cat</code> the content is loaded but not using the select-picker style. It just shows:</p>
  
  <p><code>glyphicon-sort-by-alphabetOPTION 1</code> (screenshots below)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;select id="main_cat" name="main_cat" class="selectpicker"&gt;
      &lt;option selected="-1"&gt;Kies een thema&lt;/option&gt;
      &lt;option value="Actief_Avontuur" data-name="Actie &amp; avontuur" data-icon="glyphicon-sort-by-alphabet" class="special"&gt;&amp;nbsp;&amp;nbsp;Actief, sportief en avontuurlijk&lt;/option&gt;
      &lt;option value="Creatief" data-name="Creatief" data-icon="glyphicon-sort-by-alphabet-alt" class="special"&gt;&amp;nbsp;&amp;nbsp;Creatief&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="sub_cat" disabled="disabled" class="selectpicker_1 sub_cat"&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(function(){
      $('#main_cat').change(function(){
          var $option = $(this).find('option:selected'),
              id = $option.val(),
              name = $option.data('name');
              // open your browser's console log and ensure that you get the correct values
          console.log(id, name);
              $(".sub_cat").empty();
              // call ajax
          $.ajax({
              url: "&lt;?php bloginfo('wpurl'); ?&gt;/wp-admin/admin-ajax.php",     
              type:'POST',
              data: {
                  action: 'my_special_ajax_call',
                  main_catid: id,
                  main_name: name
              },
              success: function (results) {
                  $(".sub_cat").removeAttr('disabled').html(results);
                  $('.selectpicker_1').selectpicker(["refresh"]);
              }
          });
      });
  });         
  </code></pre>
  
  <p>I have tried refreshing both <code>selectpickers</code> using:</p>
  
  <pre><code>$('.selectpicker').selectpicker(["refresh"]);
  $('.selectpicker_1').selectpicker(["refresh"]);
  </code></pre>
  
  <p>And this (as was suggested in the question in the link)</p>
  
  <pre><code>$('.selectpicker').selectpicker({});
  </code></pre>
  
  <p>Here are some screenshots: The first one is when I select the option for the first time and the second one is when I select another option from <code>#main_cat</code>. Do I have to do something with a <code>foreach</code> so that I constantly reloads when AJAX is done? Someone know of a solution?</p>
  
  <p>Selecting an option for the first time
  <a href="https://i.stack.imgur.com/4ieZA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4ieZA.png" alt="Selecting an option for the first time"></a></p>
  
  <p>Selecting an option for the second time
  <a href="https://i.stack.imgur.com/9T57q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9T57q.png" alt="Selecting an option for the second time"></a></p>