我试图在带有 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>
最佳答案
我的方法:
- 将输入字段放入自己的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>
关于javascript - 在 vanilla javascript 中显示和隐藏带有选择的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72206924/