javascript – 根据所选的选项显示/隐藏不同的表单

我想知道如何根据一个表单的选择显示/隐藏不同的表单.

在下面的示例代码中,所有三个表单都自动设置为display：none.如果从“淋浴”形式中选择相应的值,我想只显示一个“隐藏”形式.因此,如果从“淋浴”表格中选择“表格1”选项,则显示下面的表格1;如果从“淋浴”表格中选择“表格2”选项,则显示表格2;等等.

优选地,具有淡入/淡出动画或其他光动画.

这是一个样本……

<form id="form-shower">
<select>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_3" style="display:none">
<!---- THIS IS FORM 3---->
</form>

感谢您的帮助.

解决方法:

您可以使用jQuery来帮助您：

<form id="form-shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_name2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
<script>
$("#myselect").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
})
</script>

我在你的选择中添加了一个id,并更改了三个表单的id名称:)

希望能帮助到你 ：)

标签：show-hide,javascript,forms
来源： https://codeday.me/bug/20190723/1512091.html