javascript - 在 vanilla javascript 中显示和隐藏带有选择的 div

Question

我试图在带有 HTML 选择选项的表单中显示输入元素。共有三个选项(DVD、书籍和家具)，每个选项都有其产品描述输入字段(例如重量、高度、尺寸 (MB) 和长度)。

这些输入应该被隐藏，并且只在选择选项改变时显示。我想使用 for 循环而不是 if 或 else 条件语句。

隐藏的输入字段不会使用选择按钮按预期隐藏和显示。我仍在学习，任何提示都会有所帮助。

var display = {
  1: [],
  2: ["book"],
  3: ["dvd"],
  4: ["Furniture"],

}

function selectChanged() {
  var sel = document.getElementById("productType");
  for (var i = 1; i < 4; i++) {
    document.getElementById("product" + i).classList.add("hidden");
  }
  display[sel.value].forEach(function(i) {
    document.getElementById("product" + i).classList.remove("hidden");
  });
}

 <style>
.product{
    border: 1px solid #333;
    padding: 5px;
    width: 20%;
    margin: 25px 20px;
}
.info{
    text-align: center;
    
}
.bottom-line{
    box-sizing: border-box;
    border-top: 1px solid;
    margin: 0 34px;
}

form{
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.input-form{
    width: 100%;

}
.data-input input{
    width: 20%;
    padding: 12px 20px;
    margin: 8px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
 
.switcher{
    width: 25%;
    margin: 25px;
    display: inline-block;
    display: flex;
    justify-content: center;

}
.input-group{
    margin: 20px;
    display: flex;
    justify-content: center;
    
}
.same-line{
    margin: 0;
    width: 25%;
}
.furniture{
    width: 50%; 
    display: none;
}
.furniture input{
    width: 20%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.describe{
    margin-top: 25px;
}

.hidden{
    display: none;
}



</style>

<section class="add_products">
  <form class="input-form" action="" id="product_form">
    <div class="data-input">
      <label for="sku">SKU#:</label>
      <input type="text" id="sku" name="sku">
    </div>

    <div class="data-input">
      <label for="name">NAME:</label>
      <input type="text" id="name" name="name">
    </div>

    <div class="data-input">
      <label for="price">PRICE ($):</label>
      <input type="number" id="price" name="price">
    </div>

    <div class="input-group switcher">
      <label for="productType">Type Switcher:</label>
      <select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
        <option value="1">DVD</option>
        <option value="2">Book</option>
        <option value="3">furniture</option>
      </select>
    </div>

    <div class="data-input product hidden">
      <label for="size">Size (MB):</label>
      <input type="number" class="hidden" id="size" name="price">
      <p class="describe">Please provide size in (MB)</p>
    </div>

    <div class="furniture product hidden">
      <label for="height">Height (CM):</label>
      <input type="number" id="height" name="price">
    </div>
    <div class="furniture product hidden">
      <label for="width">Width (CM):</label>
      <input type="number" id="width" name="price">
    </div>

    <div class="furniture product hidden">
      <label for="length">Length (CM):</label>
      <input type="number" id="length" name="price">
      <p class="describe">Please provide measurements in (CM)</p>
    </div>

    <div class="data-input product hidden">
      <label for="weight">Weight (KG):</label>
      <input type="number" id="weight" name="price">
      <p class="describe">Please provide weight in KG</p>
    </div>

Answer 1

我的方法:

• 将输入字段放入自己的div
• 为他们提供与选择选项相对应的 ID。
• 使用 Javascript 检查您根据这些 ID 的当前显示值声明的选定值，并根据需要进行切换。

它与您使用的有点不同，但它可以工作。让我知道你的想法。

function selectChanged() {
  var sel = document.getElementById("productType");
  let dvd = document.getElementById("dvd");
  let book = document.getElementById("book");
  let furniture = document.getElementById("furniture");
  for (var i = 1; i < 4; i++) {
    dvd.style.display = sel.value == "1" ? "block" : "none";
    book.style.display = sel.value == "2" ? "block" : "none";
    furniture.style.display = sel.value == "3" ? "block" : "none";
  }
}

.product {
  border: 1px solid #333;
  padding: 5px;
  width: 20%;
  margin: 25px 20px;
}

.info {
  text-align: center;
}

.bottom-line {
  box-sizing: border-box;
  border-top: 1px solid;
  margin: 0 34px;
}

form {
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.input-form {
  width: 100%;
}

.data-input input {
  width: 20%;
  padding: 12px 20px;
  margin: 8px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.switcher {
  width: 25%;
  margin: 25px;
  display: inline-block;
  display: flex;
  justify-content: center;
}

.input-group {
  margin: 20px;
  display: flex;
  justify-content: center;
}

.same-line {
  margin: 0;
  width: 25%;
}

.furniture {
  width: 50%;
  display: block;
}

.furniture input {
  width: 20%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.describe {
  margin-top: 25px;
}

#dvd {
  display: none;
}

#book {
  display: none;
}

#furniture {
  display: none;
}

<section class="add_products">
  <form class="input-form" action="" id="product_form">
    <div class="data-input">
      <label for="sku">SKU#:</label>
      <input type="text" id="sku" name="sku">
    </div>

    <div class="data-input">
      <label for="name">NAME:</label>
      <input type="text" id="name" name="name">
    </div>

    <div class="data-input">
      <label for="price">PRICE ($):</label>
      <input type="number" id="price" name="price">
    </div>

    <div class="input-group switcher">
      <label for="productType">Type Switcher:</label>
      <select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
        <option value="">Please Select</option>
        <option value="1">DVD</option>
        <option value="2">Book</option>
        <option value="3">Furniture</option>
      </select>
    </div>

    <div id="dvd">
      <div class="data-input product">
        <label for="size">Size (MB):</label>
        <input type="number" id="size" name="price">
        <p class="describe">Please provide size in (MB)</p>
      </div>
    </div>

    <div id="book">
      <div class="furniture product">
        <label for="height">Height (CM):</label>
        <input type="number" id="height" name="price">
      </div>
      <div class="furniture product">
        <label for="width">Width (CM):</label>
        <input type="number" id="width" name="price">
      </div>
    </div>

    <div id="furniture">
      <div class="furniture product">
        <label for="length">Length (CM):</label>
        <input type="number" id="length" name="price">
        <p class="describe">Please provide measurements in (CM)</p>
      </div>
      <div class="data-input product">
        <label for="weight">Weight (KG):</label>
        <input type="number" id="weight" name="price">
        <p class="describe">Please provide weight in KG</p>
      </div>
    </div>
  </form>
</section>