我的选择引导程序没有显示我附加的选项:
这是索引:
<div class="form-group label-floating">
<div class="row">
<div class="col-lg-5 col-md-6 col-sm-3">
<select id="recau_agente" class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
</select>
</div>
</div>
</div>
这是在选择中插入选项的 jQuery:
var ruta = "https://maxtechglobal.com/vencimientos/arba/conceptos_recaudacion.php";
var $select = $('#recau_agente');
$.getJSON(ruta, function(json) {
$select.html('');
$.each(json.data, function(index, value) {
$select.append('<option id="' + value.concepto + '">' + value.concepto + '</option>');
});
});
我明白你的意思,你真正需要的是refresh
获取数据并完成选择选项的更新后调用。因此,在.each
之后添加以下内容(因为每个都是同步的,因此不需要回调,只需将refresh
放在.each
工作之后即可(
$('.selectpicker').selectpicker('refresh');
若要使用 JavaScript 以编程方式更新选择,#.选择选择器('刷新'(
请先操作选择,然后使用 refresh 方法更新 UI 以匹配新状态。在删除或添加选项或通过 JavaScript 禁用/启用选择时,这是必需的。
参考: https://silviomoreto.github.io/bootstrap-select/methods/
$(document).ready(function() {
var ruta = "https://maxtechglobal.com/vencimientos/arba/conceptos_informacion.php";
var $select = $('#select');
//init
$('.selectpicker').selectpicker({
style: 'btn btn-primary btn-round'
});
// arma el ajax de la variable ruta con una funcion incorporada
$.getJSON(ruta, function(json) {
// vacia el select
$select.html('');
// cada array del parametro tiene un elemento index(concepto) y un elemento value(el valor de concepto)
$.each(json.data, function(index, value) {
// darle un option con los valores asignados a la variable select
$select.append('<option id="' + value.id+ '">' + value.impuesto+ '</option>');
});
$('.selectpicker').selectpicker('refresh');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.js"></script>
<select id="select" class="selectpicker" data-style="" title="Single Select" data-size="15"></select>