使用Bootstrap Selectpicker动态添加选项仅显示100条的问题

我在HTML中创建了一个select标签，希望动态添加选项，代码如下：

<select class="form-control selectpicker"
data-style="btn btn-outline"
id="mySelect"
data-live-search="true"
>
   <option class="d-none" value="all" selected>My option</option>
</select>

需要从包含约2000个键值对的JSON文件中读取数据并创建选项，JS代码如下：

const mySelect = document.getElementById("mySelect");
  fetch("myFile.json")
    .then((response) => response.json())
    .then((result) => {
      Object.entries(result).forEach(([key, value]) => {
        const option = document.createElement("option");
        option.value = value;
        option.text = key;
        mySelect.appendChild(option);
      });
      $(mySelect).selectpicker("refresh");
    });

但最终仅创建了约100个选项，不过在循环内使用console.log可以输出所有键，请问这是什么原因？我哪里操作有误？

核心原因 #

你使用的**Bootstrap Select（selectpicker）**组件默认带有maxOptions配置项，默认值为100，用于限制组件可显示/选择的最大选项数量。虽然你通过原生DOM成功添加了全部2000个选项，但组件的这个配置限制了最终展示的数量，导致只能看到100个。

解决方案 #

方案1：通过HTML属性配置

直接在select标签上添加data-max-options属性，设置为你需要的数量（或false取消限制）：

<select class="form-control selectpicker"
data-style="btn btn-outline"
id="mySelect"
data-live-search="true"
data-max-options="2000"
>
   <option class="d-none" value="all" selected>My option</option>
</select>

方案2：通过JavaScript动态配置

在调用refresh方法前，修改组件的配置参数：

const mySelect = document.getElementById("mySelect");
fetch("myFile.json")
  .then((response) => response.json())
  .then((result) => {
    Object.entries(result).forEach(([key, value]) => {
      const option = document.createElement("option");
      option.value = value;
      option.text = key;
      mySelect.appendChild(option);
    });
    // 设置maxOptions并刷新组件
    $(mySelect).selectpicker({
      maxOptions: false // 取消限制，或设为2000指定数量
    }).selectpicker("refresh");
  });

性能优化建议 #

一次性添加2000个选项会触发多次DOM重绘，影响页面性能。建议使用DocumentFragment批量插入选项，减少DOM操作次数：

const mySelect = document.getElementById("mySelect");
fetch("myFile.json")
  .then((response) => response.json())
  .then((result) => {
    const fragment = document.createDocumentFragment();
    Object.entries(result).forEach(([key, value]) => {
      const option = document.createElement("option");
      option.value = value;
      option.text = key;
      fragment.appendChild(option);
    });
    // 一次性插入所有选项到DOM
    mySelect.appendChild(fragment);
    $(mySelect).selectpicker({
      maxOptions: false
    }).selectpicker("refresh");
  });

内容的提问来源于stack exchange，提问作者user23454796