代码之家 › 专栏 › 技术社区 › Agustín Osorio

如何在select bootstrap中附加选项?

bootstrap-select jquery javascript

Agustín Osorio · 技术社区 · 7 年前

这是索引:

<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,用于在select中插入选项:

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

1 回复 | 直到 7 年前

Dalin Huang 3 年前

我明白你的意思,你真正需要的是打电话 refresh .each (由于每个都是同步的,因此不需要回调,只需将之后 每个

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

#.选择器(“刷新”)

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

裁判: 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>