在选择框中选择值时显示特定div的输入文本框,可以通过以下步骤实现:
<select id="selectBox">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div id="div1" style="display: none;">
<input type="text" id="input1">
</div>
<div id="div2" style="display: none;">
<input type="text" id="input2">
</div>
<div id="div3" style="display: none;">
<input type="text" id="input3">
</div>
document.getElementById("selectBox").addEventListener("change", function() {
var selectedValue = this.value;
// 隐藏所有的div
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
// 根据选择的值显示对应的div
if (selectedValue === "option1") {
document.getElementById("div1").style.display = "block";
} else if (selectedValue === "option2") {
document.getElementById("div2").style.display = "block";
} else if (selectedValue === "option3") {
document.getElementById("div3").style.display = "block";
}
});
以上代码通过监听选择框的变化事件,获取选择的值,并根据值的不同显示对应的div。通过设置div的display属性为"block"或"none",可以控制div的显示和隐藏。根据选择的值,可以在相应的div中输入文本。
这是一个简单的实现方式,可以根据实际需求进行扩展和优化。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云