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

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

Я попытался заменить выпадающие меню на самозагрузки-выберите и как только я включаю класс = «selectpicker форм-контроль» во втором раскрывающемся меню оно не будет больше заселена после был выбран первый раскрывающийся список.

Это шаблон 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="http://getbootstrap.com/examples/non-responsive/non-responsive.css" 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 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 < option_list.length; i++) { 
      $("#model_select").append(
       $("<option></option>").attr(
        "value", option_list[i][0]).text(option_list[i][1]) 
      ); 
     } 
    }); 
});

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

источник

2014-10-04 user977828

После AJAX будет сделано, вы должны перезагрузить плагин:

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

или

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

источник

2014-10-08 23:20:24

идеальный ответ .. недурно !! – Gags

Спасибо, Фред Вугерс! :-) – vkm

но это не работает, т. Е. 10, 11, https://stackoverflow.com/questions/28879182/bootstrap-select-drop-list-moves-down-ward-automatically –

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

ответ

Смежные вопросы