AJax 不适用于 bootstrap-select
Posted
技术标签:
【中文标题】AJax 不适用于 bootstrap-select【英文标题】：AJax does not work with bootstrap-select 【发布时间】：2014-11-29 06:40:00 【问题描述】：我发现flask-jquery-ajax example 用户从车辆“品牌”下拉菜单中选择一个项目，车辆“模型”下拉菜单通过向所选品牌的模型列表发出 AJAX 请求来填充。
我尝试用 bootstrap-select 替换下拉菜单，并且在第二个下拉菜单中包含 class="selectpicker form-control"菜单在选择第一个下拉菜单后不再填充。
这是 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])
);
);
);
为什么 bootstrap-select 中的 class="selectpicker form-control" 导致第二个下拉菜单不再填充？
【问题讨论】：
【参考方案1】：AJAX完成后，需要重新加载插件：
$('#model_select').selectpicker('refresh');
或
success: function(data)
$("#model_select").html(data).selectpicker('refresh');
【讨论】：
完美答案.. 竖起大拇指！！ 谢谢你，Fred Wuerges！ :-) 但在 ie 10, 11, ***.com/questions/28879182/…987654321@ 中不起作用 或者只是 $('.selectpicker').selectpicker('refresh');刷新表单上的所有选择器。以上是关于AJax 不适用于 bootstrap-select的主要内容，如果未能解决你的问题，请参考以下文章