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

Question

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

在下面的示例代码中，所有三种形式都自动设置为显示:无。如果从“淋浴”形式中选择了相应的值，我只想显示其中一种“隐藏”形式。因此，如果从“淋浴”表格中选择选项“表格 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>

感谢您对此的任何帮助。

Answer 1

您可以使用 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 名称 :)

希望对您有所帮助:)