javascript - jQuery:无法选择附加的选择选项

Question

我是编码新手，刚刚遇到了一个看起来应该是的问题 很容易解决，但我整天都找不到有效的解决方案。这里的其他线程似乎都没有解决我的确切问题。我在今天之前从未使用过 jQuery，只使用过 vanilla JS，所以可能是关于 jQuery 的一些我没有得到的东西。

我正在处理一个带有两个选择菜单的表单。第一个菜单选择产品，第二个菜单为您提供更具体的选项。第二个菜单首先是禁用的，只对 menu1 的某些产品启用。此外，menu2 有不同的选项，具体取决于 menu1 的所选产品，这就是我在附加新选项之前使用 .empty() 的原因。

menu2 的选项按预期显示，唯一的问题是我无法选择它们。我得到了选项，但只选择了默认选项。

Here is the relevant code on codepen (我尝试对 tShirtOptions() 函数使用不同的语法，但没有成功)

const menu1 = document.getElementById("produktart");
const menu2 = document.getElementById("stickstand");

function menuEnabler() {
  menu2.disabled = false;
  menu2.classList.remove("text-muted");
  menu2.classList.add("text-secondary");
}

function menuDisabler() {
  menu2.disabled = true;
  menu2.classList.remove("text-secondary");
  menu2.classList.add("text-muted");
}

function tShirtOptions() {
  $(menu2)
    .empty()
    .append($('<option>', {
      text: "Menu2",
      disabled: true,
      selected: true,
      class: "d-none"
    }))
    .append($('<option>', {
      value: "Vorderteil/Herzstand",
      text: "Vorderteil/Herzstand"
    }))
    .append($('<option>', {
      value: "Rücken",
      text: "Rücken"
    }))
    .append($('<option>', {
      value: "Ärmel",
      text: "Ärmel"
    }))
    .append($('<option>', {
      value: "Kragen",
      text: "Kragen"
    }))


}

function hemdOptions() {
  $(menu2)
    .empty()
    .append('<option disabled selected class="d-none">Menu2</option>')
    .append('<option value="Vorderteil/Herzstand">Vorderteil/Herzstand</option>')
    .append('<option value="Rücken">Rücken</option>')
    .append('<option value="Ärmel">Ärmel</option>')
    .append('<option value="Kragen">Kragen</option>')
    .append('<option value="Manschetten">Manschetten</option>')
}

function capOptions() {
  $(menu2)
    .empty()
    .append('<option disabled selected class="d-none">Menu2</option>')
    .append('<option value="Front">Front</option>')
    .append('<option value="Seite">Seite</option>')
    .append('<option value="Hinten">Hinten</option>')
}

function removeAll() {
  $(menu2)
    .empty()
    .append('<option disabled selected class="d-none text-muted">Menu2</option>')
}

document.addEventListener("change", function(e) {
  let index = menu1.selectedIndex;

  if (index <= 4) {
    menuEnabler();
    tShirtOptions();
  } else if (index === 5) {
    menuEnabler();
    hemdOptions();

  } else if (index === 6) {
    menuEnabler();
    capOptions()

  } else if (index > 6) {
    menuDisabler();
    removeAll();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container pt-5">
  <div class="form-group">
    <label class="sr-only" for="produktart">Produktart</label>
    <select class="form-control corners-round text-secondary px-3" id="produktart" name="produktart" required>
      <option disabled selected value class="d-none">Menu1</option>
      <option value="T-Shirts">T-Shirts</option>
      <option value="Polo-Shirts">Polo-Shirts</option>
      <option value="Sweat-Shirts">Sweat-Shirts</option>
      <option value="Jacken">Jacken</option>
      <option value="Hemden/Blusen">Hemden/Blusen</option>
      <option value="Caps">Caps, Strickmützen, Beanies</option>
      <option value="Aktentaschen, Rucksäcke etc.">Taschen, Rucksäcke, Laptoptaschen</option>
      <option value="Wappen">Patches, Abzeichen, Wappen</option>
      <option value="Wimpel">Wimpel</option>
      <option value="Sonstiges">Sonstiges</option>
    </select>
  </div>
  <div class="form-group">
    <label class="sr-only" for="stickstand">Stickstand</label>
    <select class="form-control corners-round text-muted px-3" id="stickstand" name="stickstand" disabled>
      <option disabled selected class="d-none">Menu2</option>
    </select>
  </div>
  </form>
  <div>

Answer 1

因为当您更改第二个 select 元素时，通用的 onchange 事件会触发

document.addEventListener("change", function(e) { 

并且您正在重置菜单。将事件监听器绑定(bind)到选择元素。或者，如果您需要这样做，请检查它是否是第一个被更改的选择元素。