jQuery AJax 不适用于 bootstrap-select
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26191920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AJax does not work with bootstrap-select
提问by user977828
I found flask-jquery-ajax examplewhere 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.
我发现了flask-jquery-ajax 示例，其中用户从车辆“制造”下拉菜单中选择一个项目，车辆“型号”下拉菜单通过对所选制造商的模型列表发出 AJAX 请求来填充。
I tried to replace the drop-down menus by bootstrap-selectand as soon as I include class="selectpicker form-control"in the second drop-down menu it does not get any more populated after the first drop-down has been chosen.
我试图用bootstrap-select替换下拉菜单，一旦我在第二个下拉菜单中包含class="selectpicker form-control"，它在第一个下拉菜单被选中后就不再填充.
This is the HTML template:
这是 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>
This is the JavaScript coderesponsible for populating the drop-down menus:
这是负责填充下拉菜单的 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])
);
}
});
});
Why does class="selectpicker form-control"from bootstrap-selectcause that the second drop-down menu get not anymore populated?
为什么类=“selectpicker形式控制”从引导选事业的第二个下拉菜单中得到不再填充？
回答by Fred Wuerges
After AJAX is done, you need to reload the plugin:
AJAX完成后，你需要重新加载插件：
$('#model_select').selectpicker('refresh');
or
或者
success: function(data)
{
$("#model_select").html(data).selectpicker('refresh');
}
