Question

我是编码的新手，只是遇到了一个看起来应该是的问题容易解决，但我整天都找不到有效的解决方案。这里没有其他线程似乎可以解决我的确切问题。今天以前我从来没有使用过jQuery，只有香草JS，所以也许我不了解jQuery。

我正在处理带有两个选择菜单的表单。第一个菜单选择产品，然后第二个菜单为您提供更多特定的选项。首先禁用第二个菜单，并且仅对菜单1的某些产品启用。另外，根据menu1的选定产品，menu2具有不同的选项，这就是为什么我在附加新选项之前使用.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) {

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

jQuery：无法选择附加的选择选项

1 个答案: