我的工作想要一个非常简单的 Web 表单，我们将使用它来提交内部工作。作品提交将分为 4 个类别，每个类别都需要独特的信息。现在我现在有一个简单的表单，它执行以下操作：
请求名称：[文本框]
请求日期：[文本框]
获取：[文本框]
请求类型：[下拉] 4 项
我想要的是取决于选择的下拉项目，用户应该看到下面显示的正确表单。其中将包含一个表格形式更多“输入的项目和文本框”。
现在我正在尝试这个，但我遇到了多个问题，即我只能看到一个表格行而不是选择的所有内容。
所以也许我以错误的方式解决问题？所以我要投身于你面前，谦卑地寻求帮助。要么是正确方向的一点，要么是此时的任何东西！
$(document).ready(function() {
$('select[name="select_main_table"]').change(function() {
$("#main_table tr").hide().eq(this.value-1).show();
}).change();
});
<td><label for="typeofrequest">Type of Request</label></td>
<td><select name="select_main_table">
<option value="" selected="selected"> - Choose -</option>
<option value="1">Office Move</option>
<option value="2">Office Closure</option>
<option value="3">New Office</option>
<option value="4">New Service</option>
</select> </td>
<td> </td>
</tr>
<table id="main_table">
<tr>
<td><label for="sitecontactname">Site Contact Name</label></td>
<td><input type="text" class="validate[required,custom[sitecontactname]]" name="sitecontactname" id="sitecontactname" value="" /></td>
<td> </td>
</tr>
<tr>
<td><label for="sitecontacttitle">Site Contact Title</label></td>
<td><input type="text" class="validate[required,custom[sitecontacttitle]]" name="sitecontacttitle" id="sitecontacttitle" value="" /></td>
<td> </td>
</tr>
<tr>
<td><label for="sitecontactemail">Site Contact Email</label></td>
<td><input type="text" class="validate[required,custom[sitecontactemail]]" name="sitecontactemail" id="sitecontactemail" value="" /></td>
<td> </td>
</tr>
<tr>
<td><label for="sitecontacttelephonenumber">Site Contact Telephone Number</label></td>
<td><input type="text" class="validate[required,custom[sitecontacttelephonenumber]]" name="sitecontacttelephonenumber" id="sitecontacttelephonenumber" value="" /></td>
<td> </td>
</tr>
</table>