Result
http://jsfiddle.net/kachibito/WJ74C/14/embedded/result,js,css,html
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>