如何在选择引导程序中附加选项？

Question

我的选择引导程序不显示我附加的选项：

这是索引：

<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>');
  });
});

Answer 1

我明白您的意思了，您真正需要的是refresh在获取数据并完成对select选项的更新后调用。因此，请在之后添加以下内容.each（由于每个内容都是同步的，因此无需回叫，只需将refresh之后的内容放回去即可.each）

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

.selectpicker（'刷新'）

要以编程方式使用JavaScript更新选择，请首先操纵选择，然后使用refresh方法更新UI以匹配新状态。当删除或添加选项，或通过JavaScript禁用/启用选择时，这是必需的。

参考：https : //silviomoreto.github.io/bootstrap-select/methods/

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

$(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.tipo + '">' + value.tipo + '</option>');
    });
    $('.selectpicker').selectpicker('refresh');
  });
});