根据选择选项显示多个DIVS（内部有表单元素）

Question

Say I have a form, with a select option list. That is numbered 4 to 10

Lets say If user chooses 4 ( default )

I then display 4 divs ( with incremental ids for all form elements – appended say choice-4 etc ) Each div has exactly the same 5 form fields in it, all with matching element ID’s based on the select choice made.

If user selected say 6 from the select option, then 6 divs appear with same form field arrangement in each div, and each block of form fields id matches the option chosen.

Ok so thats confused matters… here goes.

<form>
<select id="choices">
    <option value="">Please choose</option>
    <option value="4">Create 4</option>
    <option value="5">Create 5</option>
    <option value="6">Create 6</option>
</select>

<div id="block-1">
    <input id="choice-1-1" type="text">
    <input id="choice-1-2" type="text">
    <input id="choice-1-3" type="text">
</div>
<div id="block-2">
    <input id="choice-2-1" type="text">
    <input id="choice-2-2" type="text">
    <input id="choice-2-3" type="text">
</div>
<div id="block-3">
    <input id="choice-3-1" type="text">
    <input id="choice-3-2" type="text">
    <input id="choice-3-3" type="text">
</div>
<div id="block-4">
    <input id="choice-4-1" type="text">
    <input id="choice-4-2" type="text">
    <input id="choice-4-3" type="text">
</div>
<div id="block-5">
    <input id="choice-5-1" type="text">
    <input id="choice-5-2" type="text">
    <input id="choice-5-3" type="text">
</div>
<input type="submit" id="submit" name="submit" value="Submit">

</form>

SO when page loads, none of those divs are displayed. They click 5 in select dropdown, ( which doesnt have to be part of form ) and the corresponding divs are displayed.

The pattern of form elements is exactly the same for every block. All that needs to change is the ids obviously.

I dont want anyone to make this for me, but I would like some assistance please in the most robust economical method of coding this, that can use jQuery or be a php solution ( preferred )

Cheers

Answer 1

Add a class block to all the block div elements

<form>
    <select id="choices">
        <option value="">Please choose</option>
        <option value="4">Create 4</option>
        <option value="5">Create 5</option>
        <option value="6">Create 6</option>
    </select>
    <div id="block-1" class="block">
        <input id="choice-1-1" type="text">
        <input id="choice-1-2" type="text">
        <input id="choice-1-3" type="text">
    </div>
    <div id="block-2" class="block">
        <input id="choice-2-1" type="text">
        <input id="choice-2-2" type="text">
        <input id="choice-2-3" type="text">
    </div>
    <div id="block-3" class="block">
        <input id="choice-3-1" type="text">
        <input id="choice-3-2" type="text">
        <input id="choice-3-3" type="text">
    </div>
    <div id="block-4" class="block">
        <input id="choice-4-1" type="text">
        <input id="choice-4-2" type="text">
        <input id="choice-4-3" type="text">
    </div>
    <div id="block-5" class="block">
        <input id="choice-5-1" type="text">
        <input id="choice-5-2" type="text">
        <input id="choice-5-3" type="text">
    </div>
    <input type="submit" id="submit" name="submit" value="Submit">
</form>

then

jQuery(function () {
    var $blocks = $('form .block');
    $('#choices').change(function () {
        $blocks.slice(0, +this.value || 4).show();
        $blocks.slice(+this.value || 4).hide();
    })
}).change()

Demo: Fiddle