我已经创建了一个表单，我正试图将从API获取的数据添加到选项字段。
下面是我的网站链接。我把两个不同的例子放在一起。你可以向下滚动页面，并能够看到我的意思。
我使用了这个示例代码，但它不起作用。

new TomSelect("#makeField", {
sortField: {
field: "text",
direction: "desc",
},
});

https://pyro.design/
php代码

<?php
/**
 * Template Name: Custom Page Template
 *
 * This is the template file for generic pages.
 * You can customize this file to fit your specific needs.
 *
 * @package Pyro
 */
get_header(); ?>
<?php get_template_part("template-parts/navigation"); ?>
<section class="pageDefault">
<form id="form__lead">

<label for="yearField">Select Year:</label>
  <select id="yearField" name="yearField" class="vehicleYear">
  <option value="">Select year</option>
    <option value="2024">2024</option>
    <option value="2023">2023</option>
    <option value="2022">2022</option>
    <option value="2021">2021</option>
    <option value="1958">1958</option>
  </select><br/>

<label for="makeField">Select Make:</label>
  <select id="makeField" name="makeField" class="vehicleMake">
    <!-- Options go here -->
    <option value="">Select make</option>
  </select>
  
</form>
</section>

<?php get_footer(); ?>

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",
  },
});
// Event listener to update selectedYear when the year select field changes
yearField.addEventListener("change", function () {
  selectedYear = yearField.value;
  fetchData(); // Fetch data when the year is changed
});
function fetchData() {
  const apiEndpoint = `https://done.ship.cars/makes/?year=${selectedYear}`;
  axios
    .get(apiEndpoint)
    .then(function (response) {
      const data = response.data; // Assuming the response is an array of options
      populateDropdown(data, makeField);
      console.log(data);
    })
    .catch(function (error) {
      console.error("Error fetching data:", error);
      console.log("Response status:", error.response.status);
      console.log("Response data:", error.response.data);
    });
}
function populateDropdown(data, dropdown) {
  dropdown.innerHTML = "";
  const defaultOption = document.createElement("option");
  defaultOption.value = "";
  defaultOption.textContent = "Select make";
  dropdown.appendChild(defaultOption);
  data.forEach(function (item) {
    const option = document.createElement("option");
    option.value = item.make;
    option.textContent = item.make;
    dropdown.appendChild(option);
  });
}

我试图加载数据被提取到选项字段生成的汤姆选择js库。我能够获取数据，但无法将其动态分配给选项字段。