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