javascript - 如何使用 HTML <select> 控件切换表单

Question

我目前正在开发一个 Web 应用程序，它要求我根据用户的类别注册用户。我有一个组合框，用户可以在其中选择他们是哪种类型的用户。

我想做的是根据用户选择的值显示一个相关的表单。我正在使用 PHP 来实现所有功能，但我是 jQuery 的新手。任何人都可以展示如何实现这一点，或者展示一种不同的方式来重新加载页面吗？

Answer 1

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

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.
    });

});