SO - 21299881

by Arun P Johny

HTML

<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>
    <div id="block-6" class="block">
        <input id="choice-6-1" type="text">
        <input id="choice-6-2" type="text">
        <input id="choice-6-3" type="text">
    </div>
    <input type="submit" id="submit" name="submit" value="Submit">
</form>

JavaScript

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