select要素に応じてフォームの要素を複数表示する

Ads

Result

jQuery

$(document).ready(function() {
    $('#count').change(function() {
         //selectedになったらイベント発生
        $("#count option:selected").each(function() {
            c = parseInt($(this).text());
            //数に応じてスライドでフォームを表示
            for (var i = c + 1; i <= 6; i++) {
                $('.sets').filter('[rel=' + i + ']').slideUp();
            }
            for (var j = c; j >= 1; j--) {
                $('.sets').filter('[rel=' + j + ']').slideDown();
            }
        });
    }).change();
});​

css

fieldset{
    display: block;
    border: #ddd 1px solid;
    padding: 5px;
    margin: 5px;
    width: 350px ;
}
input{
    display: block;
    outline:none;
    border: #ddd 1px solid;
    padding: 5px;
    margin: 5px;
}
input:hover, input:focus, input:active{
    border: #ddd 1px solid;
}

html

<form>
    <select id="count">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
    <fieldset class="sets" id="set-1" rel="1">
        <input id="field-1-1" /><input id="field-1-2" />
    </fieldset>
    <fieldset class="sets" id="set-2" rel="2">
        <input id="field-2-1" /><input id="field-2-2" />
    </fieldset>
    <fieldset class="sets" id="set-3" rel="3">
        <input id="field-3-1" /><input id="field-3-2" />
    </fieldset>
    <fieldset class="sets" id="set-3" rel="4">
        <input id="field-3-1" /><input id="field-3-2" />
    </fieldset>
    <fieldset class="sets" id="set-3" rel="5">
        <input id="field-3-1" /><input id="field-3-2" />
    </fieldset>
    <fieldset class="sets" id="set-3" rel="6">
        <input id="field-3-1" /><input id="field-3-2" />
    </fieldset>
</form>​

via

add/remove parts of a form