如何在选择引导程序中附加选项? [英] how to append options in select bootstrap?

问题描述

我选择的引导程序没有显示我附加的选项:

这是索引:

<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="单选" data-size="7"></选择>

这是在选择中插入选项的jQuery:

var ruta = "https://maxtechglobal.com/vencimientos/arba/conceptos_recaudacion.php";var $select = $('#recau_agente');$.getJSON(ruta, 函数(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');

<块引用>

.selectpicker('刷新')

要使用 JavaScript 以编程方式更新选择，首先操作选择，然后使用刷新方法更新 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');//在里面$('.selectpicker').selectpicker({风格:'btn btn-primary btn-round'});//arma el ajax de la variable ruta con una funcion incorporada$.getJSON(ruta, 函数(json) {//退出选择$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('刷新');});});

<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="单选" data-size="15"></select>

My select bootstrap dosn't show the options i append:

This is the index:

<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>

This is the jQuery to insert the options in the 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>');
  });
});

解决方案

I see what you mean, what you really need is to call refresh after you get the data and finished updating the select option. So add the following after the .each (since each is synchronous so no need for call back, just put the refresh after the .each will work)

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

.selectpicker('refresh')

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

REF: 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.tipo + '">' + value.tipo + '</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>

这篇关于如何在选择引导程序中附加选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！