要实现表单的动态显示,可以使用JavaScript来实现。
以下是一个示例代码,通过JavaScript实现了根据选择的选项动态显示不同的表单内容。
HTML代码:
JavaScript代码:
function showForm() {
var selectValue = document.getElementById("mySelect").value;
// 隐藏所有表单内容
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "none";
document.getElementById("form3").style.display = "none";
// 根据选择的选项显示对应的表单内容
if (selectValue === "option1") {
document.getElementById("form1").style.display = "block";
} else if (selectValue === "option2") {
document.getElementById("form2").style.display = "block";
} else if (selectValue === "option3") {
document.getElementById("form3").style.display = "block";
}
}
以上代码中,通过使用onchange
事件监听下拉框的选择变化,在showForm()
函数中根据选择的选项值,使用getElementById()
获取对应的表单内容元素,并将其display
属性设置为block
来显示。同时,将其他表单内容元素的display
属性设置为none
来隐藏。
这样,当选择不同的选项时,对应的表单内容就会动态显示和隐藏。