title: AJax does not work with bootstrap-select
body: <p>I found <a href="https://github.com/saltycrane/flask-jquery-ajax-example">flask-jquery-ajax example</a> where the user selects an item from the vehicle "Make" drop down menu, the vehicle "Model" drop down menu is populated by making an AJAX request for a list of models for the make selected.</p>
  
  <p>I tried to replace the drop-down menus by <em>bootstrap-select</em> and as soon as I include <em>class="selectpicker form-control"</em> in the second drop-down menu it does not get any more populated after the first drop-down has been chosen.</p>
  
  <p>This is the HTML template:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Flask Jquery AJAX Drop Down Menu Example&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" &gt;
      &lt;link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='web.css') }}"&gt;
  
      &lt;!-- Custom styles for this template --&gt;
      &lt;link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Select Vehicle&lt;/h1&gt;
  
      &lt;form class="form-horizontal" action="/" method="POST" &gt;
        &lt;div class="input-group"&gt;
      &lt;span class="input-group-addon"&gt;Make:&lt;/span&gt;
      {{ form.make(id="make_select", class="selectpicker form-control") }}
        &lt;/div&gt;
  
        &lt;div class="input-group"&gt;
      &lt;span class="input-group-addon"&gt;Model:&lt;/span&gt;
      {{ form.model(id="model_select", class="selectpicker form-control") }}
        &lt;/div&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  
      {% if chosen_make %}
          &lt;h2&gt;You selected:&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;Make ID: {{ chosen_make }}&lt;/li&gt;
              &lt;li&gt;Model ID: {{ chosen_model }}&lt;/li&gt;
          &lt;/ul&gt;
      {% endif %}
  
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $('.selectpicker').selectpicker();
    &lt;/script&gt; 
    &lt;script src="/assets/vehicle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the JavaScript <a href="https://github.com/saltycrane/flask-jquery-ajax-example/blob/master/fjae/assets/vehicle.js">code</a> responsible for populating the drop-down menus:</p>
  
  <pre><code>$("#make_select").change(function() {
      var make_id = $(this).find(":selected").val();
      var request = $.ajax({
          type: 'GET',
          url: '/models/' + make_id + '/',
      });
      request.done(function(data){
          var option_list = [["", "--- Select One ---"]].concat(data);
  
          $("#model_select").empty();
          for (var i = 0; i &lt; option_list.length; i++) {
              $("#model_select").append(
                  $("&lt;option&gt;&lt;/option&gt;").attr(
                      "value", option_list[i][0]).text(option_list[i][1])
              );
          }
      });
  });
  </code></pre>
  
  <p>Why does <em>class="selectpicker form-control"</em> from <em>bootstrap-select</em> cause that the second drop-down menu get not anymore populated?</p>