AJax不能与bootstrap-select一起使用

我找到了flask-jquery-ajax示例 ，其中用户从车辆“Make”下拉菜单中选择项目，通过对所选择的make的模型列表发出AJAX请求来填充车辆“Model”下拉菜单。

我试图通过bootstrap-select替换下拉菜单，只要我在第二个下拉菜单中包含class =“selectpicker form-control” ，它就会在选择第一个下拉菜单后再填充它。

这是HTML模板：

            
Select Vehicle
 
 
 Make: {{ form.make(id="make_select", class="selectpicker form-control") }} 
 
 Model: {{ form.model(id="model_select", class="selectpicker form-control") }} 
 Submit 
 {% if chosen_make %} 
You selected:
 
 
Make ID: {{ chosen_make }}
 
Model ID: {{ chosen_model }}
 
 {% endif %}     $('.selectpicker').selectpicker();     

这是负责填充下拉菜单的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( $("").attr( "value", option_list[i][0]).text(option_list[i][1]) ); } }); }); 

为什么class =“selectpicker form-control”来自bootstrap-select导致第二个下拉菜单不再被填充？

Answer 1

完成AJAX后，您需要重新加载插件：

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

要么

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