您可以尝试使用如图所示的类别下拉列表。

HTML 代码

落下

<select id="category">
   <option value="#form1">Category 1</option>
   <option value="#form2">Category 2</option>
   <option value="#form3">Category 3</option>
</select>

形式

<form id="form1">
</form>    

<form id="form2">
</form>

<form id="form3">
</form>

jQuery 代码

$(function(){
    var forms = $('form'); //cache all Forms
    forms.hide(); //hide initial

    $('#category').on('change', function(){
        forms.hide();                 //on change hide all forms
        var formId = $(this).val();   //get form id to show
        $(formId).show();    //find form by its id in cached forms and show.
    });

});

您可以使用 jQuery show()和hide()函数：

例子：

$('#form1').hide();
$('#form2').hide();
$('#form3').show();

在此示例中，您的表单定义如下：

<form id="form1">...</form>
<form id="form2">...</form>
<form id="form3">...</form>

如果你想要一些效果，你也可以喜欢它并使用fadeIn()和fadeOut() 。

您可以使用 jQuerytoggle()函数：

$('#your_form').toggle();

从文档：

通过更改 CSS 显示属性，匹配的元素将立即显示或隐藏，没有动画。如果元素最初被显示，它将被隐藏；如果隐藏，它将显示。根据需要保存和恢复显示属性。如果一个元素的显示值为 inline，然后被隐藏并显示，它将再次被显示为 inline。