如何将API获取的数据动态赋值给Tom Select选项？

问题原因 #

Tom Select初始化后会生成独立的UI组件和内部数据存储，直接修改原生<select>的DOM元素不会同步到Tom Select实例，这就是你能拿到API数据但无法在Tom Select中显示的核心原因。必须使用Tom Select提供的官方API来更新选项。

修改步骤 #

1. 保存Tom Select实例引用：初始化makeField的Tom Select时，将实例赋值给变量，方便后续调用API。
2. 用Tom Select API替换原生DOM操作：在populateDropdown函数中，使用Tom Select的clearOptions、addOption等方法来更新选项，而不是直接操作原生<select>的innerHTML。

修改后的完整JavaScript代码 #

import axios from "axios";
import TomSelect from "tom-select";

const yearField = document.getElementById("yearField");
const makeField = document.getElementById("makeField");
const modelField = document.getElementById("modelField");
let selectedYear = "";

// 初始化年份选择器
new TomSelect("#yearField", {
  sortField: {
    field: "text",
    direction: "desc",
  },
});

// 初始化品牌选择器并保存实例
const makeSelect = new TomSelect("#makeField", {
  sortField: {
    field: "text",
    direction: "desc",
  },
});

// 年份变更事件监听
yearField.addEventListener("change", function () {
  selectedYear = yearField.value;
  fetchData();
});

function fetchData() {
  const apiEndpoint = `https://done.ship.cars/makes/?year=${selectedYear}`;
  axios
    .get(apiEndpoint)
    .then(function (response) {
      const data = response.data;
      populateDropdown(data);
      console.log(data);
    })
    .catch(function (error) {
      console.error("Error fetching data:", error);
      if (error.response) {
        console.log("Response status:", error.response.status);
        console.log("Response data:", error.response.data);
      }
    });
}

// 用Tom Select API更新选项
function populateDropdown(data) {
  // 清空现有选项
  makeSelect.clearOptions();
  
  // 添加默认选项
  makeSelect.addOption({ value: "", text: "Select make" });
  
  // 批量添加API返回的品牌选项
  const options = data.map(item => ({
    value: item.make,
    text: item.make
  }));
  makeSelect.addOption(options);
  
  // 刷新控件UI
  makeSelect.refreshOptions();
  // 重置选中状态为默认选项
  makeSelect.setValue("");
}

关键API说明 #

• clearOptions()：清空Tom Select的所有选项
• addOption(option/array)：添加单个或多个选项，选项格式为{value: "", text: ""}
• refreshOptions()：刷新控件UI，确保新添加的选项显示
• setValue("")：重置选中状态到默认选项

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