嘗試根據不帶 jQuery 的更改重置 select 選項

Question

我在無法使用 jQuery 的環境中工作。 當另一個 select 框中的選項發生更改時，我想更新一個 select 框中的選項。 我現在所擁有的並沒有完全清除之前的一組選項，或者它正在添加我不想要的選項。

我希望實體選項取決於所選的贊助商選項。

https://codepen.io/dzamora54/pen/poogwJN

    <label for="sponsorDropdown">Sponsor</label>
    <select name="sponsorDropdown" id="sponsorDropdown">
      <option disabled selected value>Select an option</option>
    </select>

    <label for="entityDropdown">Entity</label>
    <select name="entityDropdown" id="entityDropdown">
      <option disabled selected value>Select an option</option>
    </select>


// List of sponsors
const sponsorList = [
  {
    sponsorName: "Sponsor One",
    sponsorEntities: ["Sp1 Entity One", "Sp1 Entity Two", "Sp1 Entity Three"],
    sponsorSigners: [
      { signerName: "Sp1 Signer One", signerTitle: "Sp1 Si1 Title" },
      { signerName: "Sp1 Signer Two", signerTitle: "Sp1 Si2 Title" }
    ]
  },
  {
    sponsorName: "Sponsor Two",
    sponsorEntities: ["Not Applicable"],
    sponsorSigners: [
      { SignerName: "Sp2 Signer One", signerTitle: "Sp2 Si1 Title" }
    ]
  },
  {
    sponsorName: "Sponsor Three",
    sponsorEntities: ["Not Applicable"],
    sponsorSigners: [
      { signerName: "Sp3 Signer One", signerTitle: "Sp3 Si1 Title" },
      { signerName: "Sp3 Signer Two", signerTitle: "Sp3 Si2 Title" }
    ]
  }
];

let sponsorValue;
let sponsorIndex;

// On load calls populateSponsorDropdown function
window.addEventListener("load", function() {
  this.populateSponsorDropdown();
});

// Populates sponsor dropdown from list of sponsors
function populateSponsorDropdown() {
  for (let i = 0; i < sponsorList.length; i++) {
    let sponsor = document.getElementById("sponsorDropdown");
    let option = document.createElement("option");
    option.text = sponsorList[i].sponsorName;
    sponsor.add(option);
  }
}

// When sponsor dropdown changes, update entity dropdown as neccessary
document
  .getElementById("sponsorDropdown")
  .addEventListener("change", updateSponsorValueAndEntityDropdown);

function updateSponsorValueAndEntityDropdown() {
  sponsorValue = document.getElementById("sponsorDropdown").value;
  for (let i = 0; i < sponsorList.length; i++) {
    if (sponsorValue === sponsorList[i].sponsorName) {
      sponsorIndex = i;
    }
  }
  populateEntityDropdown();
}

// Populates entity dropdown based on sponsor that is selected
function populateEntityDropdown() {
  const emptyDropdown = document.getElementById("entityDropdown");
  const length = emptyDropdown.options.length;
  for (i = 0; i < length; i++) {
    emptyDropdown.options[i] = null;
  }
  // for (let i = 0; i < entityDropdown.length; i++) {
  //   let emptyDropdown = document.getElementById("entityDropdown");
  //   emptyDropdown.remove(i);

  for (let j = 0; j < sponsorList[sponsorIndex].sponsorEntities.length; j++) {
    let entity = document.getElementById("entityDropdown");
    let option = document.createElement("option");
    option.text = sponsorList[sponsorIndex].sponsorEntities[j];
    entity.add(option);
  }
}

Answer 1

我想我通過替換解決了這個問題

const emptyDropdown = document.getElementById("entityDropdown");
  const length = emptyDropdown.options.length;
  for (i = 0; i < length; i++) {
    emptyDropdown.options[i] = null;

和

  const emptyDropdown = document.querySelector("#entityDropdown");
  emptyDropdown.innerHTML = "";