根据选择的选项显示/隐藏不同的表单 [英] Show/Hide different forms based on a option selected

问题描述

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

I would like to know how to show/hide different forms based one form's selection.

在下面的示例代码中，所有三种形式都自动设置为display:none.我只想显示隐藏"形式之一，如果它的相应值是从淋浴"形式中选择的.因此，如果从淋浴"表单中选择了表单1"选项，则在下面显示表单1"；否则，将显示表单1".如果从淋浴器"表单中选择了选项表单2"，则显示表单2；等等.

In the sample code below all three forms are automatically set to display:none. I would like to only show one of the "hidden" forms if its corresponding value is selected from the "shower" form. So if option "Form 1" is selected from the "shower" form, then show Form 1 below; if option "Form 2" is selected from the "shower" form, then show Form 2; and so on.

最好带有淡入/淡出动画或其他浅色动画.

Preferably with a fade in/out animation to it or another light animation.

这是一个示例...

<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来帮助您:

You can use jQuery to help you with it :

<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名称:)

I added an id to your select and change the id name of your three forms :)

希望它会有所帮助:)

这篇关于根据选择的选项显示/隐藏不同的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！