如何使用HTML切换表单 <select>控制项

Question

I am currently developing a web application that requires me to register users according to their category. I have a combo-box in which the user can choose which type of user they are.

I want to do is show a relevant form according to the user's selected value. I'm am using PHP for all the functionality, but I'm a newbie to jQuery. Can anyone show how to implement this or else demonstrate a different way of doing this without reloading the page?

Answer 1

You can try using a category dropdown list as shown.

HTML Code

Dropdown

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

Forms

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

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

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

jQuery Code

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

});

Answer 2

You can use jQuery show() and hide() functions:

Example:

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

In this example you have forms defined as follows:

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

You can also get fancy with it and use fadeIn() and fadeOut() if you want some effects.

Answer 3

You can use jQuery toggle() function:

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

From the docs:

The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.