無法使用 JavaScript 迭代從選擇中刪除選項？

Question

我的目標是根據它們的 classList 從選擇輸入（“class”）中刪除選項，具體取決於在先前選擇輸入（“class-type”）中所做的選擇。 奇怪的是，當enableClassSelect時，某些選項會被刪除（它們應該是），但並非所有沒有必要類的選項都會被立即移動。 目前，在刪除所有選項之前，“類列表”需要更改約 7 次（這不應該發生！）。

請參閱下面的代碼 - 我已經多次查看它並嘗試了一些調試但無濟於事。 console.log(classSelect.length); 打印“46”，這是正確的，因此應該在迭代中檢查每個選項元素。

 function enableClassSelect(classType) { let classSelect = document.getElementById("class"); console.log("Length: " + classSelect.length); for (i = 0; i < classSelect.length; i++) { if (!classSelect.options[i].classList.contains(classType)) { classSelect.remove(i); } } classSelect.disabled = false; classSelect.classList.remove("disabled-select"); let classDefaultOption = document.getElementById("class-default-option"); classDefaultOption.innerHTML = " -- select a class -- "; return; }

 <select onchange="javascript:enableClassSelect(this.options[this.selectedIndex].value);" class="reg" id="class-type" name="class-type" required> <option disabled selected value> -- select a class type -- </option> <option value="Magician">Magician</option> <option value="Thief">Thief</option> <option value="Warrior">Warrior</option> <option value="Bowman">Bowman</option> <option value="Pirate">Pirate</option> </select> <select class="disabled-select reg" id="class" name="class" disabled required> <option class="Magician Thief Warrior Bowman Pirate" id="class-default-option" disabled selected value></option> <!-- Magicians --> <option class="Magician" value="Battle Mage">Battle Mage</option> <option class="Magician" value="Beast Tamer">Beast Tamer</option> <option class="Magician" value="Blaze Wizard">Blaze Wizard</option> <option class="Magician" value="Evan">Evan</option> <option class="Magician" value="Kanna">Kanna</option> <option class="Magician" value="Luminous">Luminous</option> <option class="Magician" value="Bishop">Bishop</option> <option class="Magician" value="Ice/Lightning Mage">Ice/Lightning Mage</option> <option class="Magician" value="Fire/Poison Mage">Fire/Poison Mage</option> <option class="Magician" value="Kinesis">Kinesis</option> <option class="Magician" value="Illium">Illium</option> <!-- Thieves --> <option class="Thief" value="Dual Blade">Dual Blade</option> <option class="Thief" value="Night Walker">Night Walker</option> <option class="Thief" value="Phantom">Phantom</option> <option class="Thief" value="Shadower">Shadower</option> <option class="Thief" value="Night Lord">Night Lord</option> <option class="Thief" value="Xenon">Xenon</option> <option class="Thief" value="Cadena">Cadena</option> <!-- Warriors --> <option class="Warrior" value="Aran">Aran</option> <option class="Warrior" value="Dawn Warrior">Dawn Warrior</option> <option class="Warrior" value="Demon Avenger">Demon Avenger</option> <option class="Warrior" value="Demon Slayer">Demon Slayer</option> <option class="Warrior" value="Hayato">Hayato</option> <option class="Warrior" value="Kaiser">Kaiser</option> <option class="Warrior" value="Mihile">Mihile</option> <option class="Warrior" value="Dark Knight">Dark Knight</option> <option class="Warrior" value="Hero">Hero</option> <option class="Warrior" value="Paladin">Paladin</option> <option class="Warrior" value="Zero">Zero</option> <option class="Warrior" value="Blaster">Blaster</option> <!-- Bowmen --> <option class="Bowman" value="Marksman">Marksman</option> <option class="Bowman" value="Bowmaster">Bowmaster</option> <option class="Bowman" value="Wild Hunter">Wild Hunter</option> <option class="Bowman" value="Wind Archer">Wind Archer</option> <option class="Bowman" value="Mercedes">Mercedes</option> <option class="Bowman" value="Pathfinder">Pathfinder</option> <!-- Pirates --> <option class="Pirate" value="Angelic Buster">Angelic Buster</option> <option class="Pirate" value="Cannoneer">Cannoneer</option> <option class="Pirate" value="Jett">Jett</option> <option class="Pirate" value="Mechanic">Mechanic</option> <option class="Pirate" value="Buccaneer">Buccaneer</option> <option class="Pirate" value="Corsair">Corsair</option> <option class="Pirate" value="Shade">Shade</option> <option class="Pirate" value="Thunder Breaker">Thunder Breaker</option> <option class="Pirate" value="Ark">Ark</option> </select>

預期：選擇一個類類型（例如“戰士”和“類”元素變為啟用並顯示正確的類。

實際：在大約 6 次調用enableClassSelect之前，“class”選項似乎是隨機刪除的，直到 select 元素為空。

Answer 1

這是一種方法，不確定它是否是最快的方法，但它確實有效。

本質上，我從 HTML 中刪除了所有選項，而我只添加了該類類型的正確選項。

 function enableClassSelect(classType) { // Make sure the names of these are the same as the value for the options in the class-type select const magicians = ["Battle Mage", "Beast Tamer", "Blaze Wizard"]; const thieves = ["Dual Blade", "Night Walker", "Phantom"]; // Make sure theses are both in the same order const classTypesNames = ["magicians", "thieves"]; const classTypes = [magicians, thieves]; let classSelect = document.getElementById("class"); // Clear the options from the classSelect, except for the default option var length = classSelect.options.length; if (length > 1) { for (i = classSelect.options.length - 1; i > 0; i--) { classSelect.remove(i); } } // Check the classtype they selected, and get the list of classes for that classType for (i = 0; i < classTypes.length; i++) { if (classType === classTypesNames[i]) { var classes = classTypes[i]; for (j = 0; j < classes.length; j++) { // Create an option element with the class as the value var opt = document.createElement("option"); opt.value = classes[j]; opt.innerHTML = classes[j]; classSelect.appendChild(opt); } } } classSelect.disabled = false; classSelect.classList.remove("disabled-select"); return; }

 <select onchange="javascript:enableClassSelect(this.options[this.selectedIndex].value);" class="reg" id="class-type" name="class-type" required> <option disabled selected value> -- select a class type -- </option> <option value="magicians">Magician</option> <option value="thieves">Thief</option> </select> <select class="disabled-select reg" id="class" name="class" disabled required> <option id="class-default-option" disabled selected value> -- select a class -- </option> </select>

每個 classType 都需要一個列表，其中包含該 classType 的類。

const warriors = ["Aran", "Dawn Warrior", "Demon Avenger"];

然后將該 classType 添加到 classTypes 列表中：

const classTypesNames = ["magicians", "thieves", "warriors"];
const classTypes = [magicians, thieves, warriors];

這部分“重置”了 classSelect 的選項，以便只保留默認選項：

var length = classSelect.options.length;
if (length > 1) {
  for (i = classSelect.options.length - 1; i > 0; i--) {
    classSelect.remove(i);
  }
}

從那里，下一部分檢查用戶選擇的 classType 的值，並獲取該 classType 的類列表，並創建選項元素並將它們附加到 classSelect：

for (i = 0; i < classTypes.length; i++) {
  if (classType === classTypesNames[i]) {
    var classes = classTypes[i];

    for (j = 0; j < classes.length; j++) {
      // Create an option element with the class as the value
      var opt = document.createElement("option");
      opt.value = classes[j];
      opt.innerHTML = classes[j];

      classSelect.appendChild(opt);
    }
  }
}