使用 JavaScript 动态选择表单

Question

我的数据库表中有两个类别。女性时尚与男性时尚在男装下，我有男鞋在 Women fashion 下，我有 Female bag我想要一个我将在 HTML 表单选择中使用的 javascript，这样当一个人选择 Women Fashion 时，他/她将看到女性时尚下的项目列表，例如第二种形式的女包，或者当一个人选择 Man Fashion 时，他/她将看到Men fashion 下的项目列表，例如第二种形式的 Men shoe。样本<form class="form">  <div class="form-group">    <select id="box1" name="num">      <option value="1">1</option>      <option value="2">2</option>      <option value="3">3</option>    </select>    <select id="box2" name="letters">      <option value="a">A</option>      <option value="b">B</option>    </select>  </div></form>然后我有这个$("#box1").on('change', function () {  var value = $(this).val();  if (value === "1" || value === "2") {      $("#box2").show();  } else {      $("#box2").hide();  }});但不知道如何使用数据库值来实现它

Answer 1

对此代码应用干哲学

这只是一个测试，但它是您正在寻找的行为吗？

HTML代码

    <form class="form">

  <div class="form-group">

    <select id="collections" name="collection">

      <option>Select a value</option>

      <option value="man">Man</option>

      <option value="woman">Woman</option>

    </select>

    <select id="box2" name="collections-items">

    </select>

  </div>

</form>

JS代码

let chooseCollections = document.querySelector('#collections')

let selectItems = document.querySelector('#box2')

let manCollection = {

  categories: ["Shoes", "Shirt"]

}

let womanCollection = {

  categories: ["Dress", "Shirt"]

}

chooseCollections.addEventListener('change', (e) => {

  selectItems.querySelectorAll('*').forEach(el => el.remove());

  selectItems.style.display = "none"

  if(e.target.value === "man") {

    selectItems.style.display = "block"

    for(let i = 0; i < manCollection.categories.length; i++) {

      var option = document.createElement('option')

      var value = manCollection.categories[i]

      option.value = value

      option.innerHTML = value

      selectItems.appendChild(option)

    }

  }

  if(e.target.value === "woman") {

    selectItems.style.display = "block"

    for(let i = 0; i < womanCollection.categories.length; i++) {

      var option = document.createElement('option')

      var value = womanCollection.categories[i]

      option.value = value

      option.innerHTML = value

      selectItems.appendChild(option)

    }

  }

})

CSS

#box2 {

  display: none;

}

我将 manCollection 和 womanCollection 表示为您数据库中的数据。此代码未优化，可以更高效，但您可以从它开始。