这是一个使用 jQuery 和 CSS 的动态示例。我提供了一个有效的 jsFiddle。
这是基本思想,您可以解决此问题并在需要时添加更多输入。
HTML:
<select id="formName9" name="blockUnits">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="form1" class="hiddenForm form">Form 1</div>
<div id="form2" class="hiddenForm form">Form 2</div>
<div id="form3" class="hiddenForm form">Form 3</div>
<div id="form4" class="hiddenForm form">Form 4</div>
<div id="form5" class="hiddenForm form">Form 5</div>
jQuery:
$("#form1").show()
$("#formName9").change(function () {
var form = "#form" + $(this).val();
$(form).siblings(".hiddenForm").hide()
$(form).show();
});
CSS:
.form {
padding: 10px;
border: 1px dotted #000;
margin: 5px;
}
.hiddenForm {
display: none;
}