使用香草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>