bootstrap - 如何填写下拉列表

Question

我正在使用引导程序并尝试填写下拉列表。 它不起作用。 我只得到空列表。 使用第二个 HTML 代码（如下）一切正常。 我想念什么？ 我正在使用 javascript。

这是我的 javascript 代码：

var select = document.getElementById("ID1");
for (var j = 0; j < arr.length; j++) {
   var opt = arr[j];
   var el = document.createElement("option");
   el.textContent = opt;
   el.value = opt;
   select.appendChild(el);
}

我的引导程序 HTML 代码，它不起作用：

<div class="dropdown bootstrap-select show-tick"> 
<select class="selectpicker"  id='ID1'> 
</select>
</div>

使用以下 HTML 代码一切正常：

<select class="custom-select custom-select-sm" id="ID1"></select>

很高兴得到一些帮助。 谢谢！

Answer 1

据我所知，引导程序中不存在selectpicker器。 在您的第二个示例中，您使用引导程序的默认自定义选择。

但是，根据您的第一个 html 片段，您似乎想使用选择selectpicker 。 有一个名为bootstrap-select的 jQuery 插件来增强默认引导组件。 如果你想使用这个，你必须先添加相应的样式表和js-files。

编辑：您提到，下拉菜单已显示，但其中没有数据。 我对这个插件不太熟悉，但设法根据您的代码获得了一个工作示例。 也许它有帮助。

我不知道您的项目的结构如何，但在我的示例中，关键部分是这部分：

$(function () {
  $(".selectpicker").selectpicker("refresh");
});

说明：在将数据添加到选择元素之前，已加载库并初始化引导选择。 由于 bootstrap-select 添加了一个按钮和一些 div 来创建下拉列表，因此原始选择元素不可见，可能仅用作数据源。 默认情况下，引导选择不是反应式的。 因此，我们必须告诉 bootstrapselect 更新它的数据。

Answer 2

textContent不是HTMLOptionElement object 的有效属性（这是您使用document.createElement("option")时创建的） - 您想要设置el.text ，或者更好的是，直接创建一个Option元素：

 var select = document.getElementById("ID1"); for (var j = 0; j < arr.length; j++) { var opt = arr[j]; var el = new Option(opt, opt); select.appendChild(el); }