Question

我的目标是根据它们的classList从选择输入（“类”）中删除选项，具体取决于先前选择输入（“类类型”）中的选择。奇怪的是，在调用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>

期望：选择一个类别类型（例如“战士”，“类别”元素将启用并显示正确的类别。

实际：在对enableClassSelect的约6次调用中，似乎随机删除了“类”选项，直到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添加到classType列表中：

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);
    }
  }
}

无法通过JavaScript迭代从选择中删除选项？

1 个答案: