AJax не работает с bootstrap-select

Я нашел пример flask-jquery-ajax, в котором пользователь выбирает элемент из раскрывающегося меню "Сделать", выпадающее меню "Модель" заполненный путем создания запроса AJAX для списка моделей для выбранного маркера.

Я попытался заменить выпадающие меню при помощи bootstrap-select, и как только я включу class= "selectpicker form-control" во второе раскрывающееся меню, он больше не будет заполняться после первого drop- вниз.

Это HTML-шаблон:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Flask Jquery AJAX Drop Down Menu Example</title>

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
    <link rel="stylesheet" href="{{ url_for('static', filename='web.css') }}">

    <!-- Custom styles for this template -->
    <link href="#" onclick="location.href='http://getbootstrap.com/examples/non-responsive/non-responsive.css'; return false;" rel="stylesheet">
</head>
<body>
    <h1>Select Vehicle</h1>

    <form class="form-horizontal" action="/" method="POST" >
      <div class="input-group">
    <span class="input-group-addon">Make:</span>
    {{ form.make(id="make_select", class="selectpicker form-control") }}
      </div>

      <div class="input-group">
    <span class="input-group-addon">Model:</span>
    {{ form.model(id="model_select", class="selectpicker form-control") }}
      </div>
        <button type="submit">Submit</button>
    </form>

    {% if chosen_make %}
        <h2>You selected:</h2>
        <ul>
            <li>Make ID: {{ chosen_make }}</li>
            <li>Model ID: {{ chosen_model }}</li>
        </ul>
    {% endif %}

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
  <script>
    $('.selectpicker').selectpicker();
  </script> 
  <script src="/assets/vehicle.js"></script>
</body>
</html>

Это код JavaScript отвечающий за заполнение раскрывающихся меню:

$("#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 < option_list.length; i++) {
            $("#model_select").append(
                $("<option></option>").attr(
                    "value", option_list[i][0]).text(option_list[i][1])
            );
        }
    });
});

Почему class= "selectpicker form-control" из bootstrap-select вызывает, что второе раскрывающееся меню больше не заполняется?

Ответы

Ответ 1

После завершения AJAX вам необходимо перезагрузить плагин:

$('#model_select').selectpicker('refresh');

или

success: function(data)
{
  $("#model_select").html(data).selectpicker('refresh');
}