从 JSON 填充下拉列表答案

【问题标题】：Populate dropdown from JSON从 JSON 填充下拉列表
【发布时间】：2021-04-04 15:30:54
【问题描述】：

我正在尝试使用来自 API 的 JSON 响应简单地填充下拉列表。

let dropdown = $('#LA_picker');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Choose State/Province</option>');
dropdown.prop('selectedIndex', 0);

const url = 'https://api.coronavirus.data.gov.uk/v1/data?filters=areaType%3DnhsTrust%3Bdate%3D2020-12-20&structure=%7B%22name%22:%22areaName%22,%22code%22:%22areaCode%22%7D&format=json&page=1';

$.getJSON(url, function(data) {
  $.each(data.data, function(key, entry) {
    dropdown.append($('<option></option>').val(entry.name).html(entry.name));
    console.log(entry.name);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="LA_picker" class="selectpicker" data-live-search="true"></select>

打开网页时，下拉菜单中有“选择州/省”，但没有其他选项。请注意，我已将console.log(entry.name); 放在那里以检查控制台输出，该输出成功并按预期给出了所有条目的名称。

我做错了什么？

【问题讨论】：

应该是<option selected disabled>;那么你就不需要dropdown.prop('selectedIndex', 0); 请注意$.getJSON 是异步的，因此根据代码运行的位置，它可能首先运行成功函数，然后是清空下拉列表并添加第一个选项的代码。 minimal reproducible example 将有助于区分正在发生的事情。
显示的代码工作正常
感谢您的回复...在进一步检查中，所有
在收到请求结果之前，您必须实例化某种插件，例如 Select2 或其他。
@LouysPatriceBessette 似乎“selectpicker”类破坏了它。这是来自 Bootstrap-select 插件。不确定如何让它们和谐地工作，因为我需要 bootstrap-select 插件的搜索功能。

标签： jquery ajax bootstrap-4 bootstrap-selectpicker

【解决方案1】：

来自您的评论：

似乎“selectpicker”类破坏了它。这是来自 Bootstrap-select 插件。

由于该<select> 元素上有一个引导选择选择器实例...必须在收到来自ajax 请求的结果后实例化该实例。

你实际上用selectpicker 类实例化了我们。删除它并在getJSON 回调中添加dropdown .selectpicker();，在$.each 循环之后。

ajax 请求需要一些时间来解决...并且 selectpicker 正在向 DOM 添加一些新元素，基于原始 <select> 的内容。这就是为什么必须在 getJSON 回调中实例化插件的原因。

bootstrap-select documentation

let dropdown = $('#LA_picker');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Choose State/Province</option>');
dropdown.prop('selectedIndex', 0);

const url = 'https://api.coronavirus.data.gov.uk/v1/data?filters=areaType%3DnhsTrust%3Bdate%3D2020-12-20&structure=%7B%22name%22:%22areaName%22,%22code%22:%22areaCode%22%7D&format=json&page=1';

$.getJSON(url, function(data) {
  $.each(data.data, function(key, entry) {
    dropdown.append($('<option></option>').val(entry.name).html(entry.name));
    console.log(entry.name);
  })
  dropdown.selectpicker();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<select id="LA_picker" data-live-search="true"></select>

【讨论】：