HTML / PHP / JS表单，根据选择框输入更改标签

Question

I have been looking around for a tutorial on how to allow the user of a form to create custom forms.

For example, user has a select box with the options:

• Protocol 1
• Protocol 2
• Protocol 3

If the user selects Protocol 1, a series of new input tags will appear (i.e. input fields, text areas, etc.). If the user selects protocol 2, a different set of input tags will appear.

I've seen it done before on other sites but can't find a tutorial or any documentation on it. Can it be done with just plain old css hiding and JS, or is there something more at play? Keep in mind I want the user to be able to submit their data into different tables depending on their protocol choice.

Thanks!

Answer 1

You can certainly do it with just CSS and JS... though I vastly prefer using jQuery for things like this. Reinvent the wheel, or use it? This may not technically answer your question because it's not pure JS, but maybe you just want it done one way or another.

HTML:

<select name="select">
    <option value="value1">Value 1</option> 
    <option value="value2" selected>Value 2</option>
    <option value="value3">Value 3</option>
</select>
<div id="set-one"   class="set">Hi</div>
<div id="set-two"   class="set">Hey</div>
<div id="set-three" class="set">Hello</div>

JavaScript:

jQuery("#select").on("change", function() {
    selection = jQuery(this).val();
    if (selection === "value1") {
        jQuery("set").hide();
        jQuery("set-one").show();
    } else if (selection === "value2") {
        jQuery("set").hide();
        jQuery("set-two").show();
    } else if (selection === "value3") {
        jQuery("set").hide();
        jQuery("set-three").show();
    }
}

How 'bout them apples?