我想在选择不同的下拉选项时选择表格。 - 必须选择他们的职业，并在此基础上，不同的表格选项将被闪现。到目前为止，这是我的代码。请指教谢谢。
<script>
$('#casualties-Form').change(function(){
if ($(this).val() == "Student") {
$('#Staff').hide();
$('#Student').show();
} else {
$('#Staff').show();
$('#Student').hide();
}
});
</script>
<form id="casualties-Form" name="casualtiesForm" method="post" action="doCasualtiesForm.php">
<legend><b><u>CASUALTIES SUMMARY CHART</u></b></legend>
<table>
<tr>
<td><label for="form">Casualty:</label></td>
<td>
<select id="myselect" name="myselect">
<option value="Student">Student</option>
<option value="Staff">Staff</option>
</select>
</td>
</tr>
<form name="Student" id="Student" class="hidden">
<tr>
<td width="150px"><label for="date">Date:</label></td>
<td><input type="date" id="date" name="Date"/></td>
</tr>
<tr>
<td><label for="time">Time:</label></td>
<td><input type="time" id="time" name="Time"/></td>
</tr>
<tr>
<td>ID:</td>
<td><input type="text" name="ID"></td>
</tr>
<tr>
<td><label for="School">School</label></td>
<td>
<select>
<optgroup label="ss" name="School">
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td><input type="text" name="Status"></td>
</tr>
<tr>
<td><label for="Location">aaa</label></td>
<td>
<select id="Location" name="Location">
<option>aaa </option>
</select>
</td>
</tr>
<tr>
<td>Lecturer Contact No:</td>
<td><input type="text" name="Number"></td>
</tr>
<tr>
<td><label for="NOK_informed">NOK Informed:</label></td>
<td>
<input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes"/>Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" /> No
</td>
</tr>
<tr>
<!--/* to let the submit button to be under the fields */-->
<td></td>
<td>
<input name="btnsubmit" value="Submit" type="submit"></p>
</td>
</tr>
</form> <!--/* This is Student Form */-->
</table>
<form name="Staff" id="Staff" class="hidden">
<table>
<tr>
<td width="150px"><label for="date">Date:</label></td>
<td><input type="date" id="date" name="Date"/></td>
</tr>
<tr>
<td><label for="time">Time:</label></td>
<td><input type="time" id="time" name="Time"/></td>
</tr>
<tr>
<td>ID:</td>
<td><input type="text" name="ID"></td>
</tr>
<tr>
<td><label for="Department">Department</label></td>
<td>
<select id="Department" name="Department">
<option>bbb</option>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td><input type="text" name="Status"></td>
</tr>
<tr>
<td><label for="Location">Hospital</label></td>
<td>
<select id="Location" name="Location">
<option>ccc</option>
</select>
</td>
</tr>
<tr>
<td>Officer Contact No:</td>
<td><input type="text" name="Number"></td>
</tr>
<tr>
<td><label for="NOK_informed">NOK Informed:</label></td>
<td>
<input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes"/>Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" /> No
</td>
</tr>
<tr>
<!--/* to let the submit button to be under the fields */-->
<td></td>
<td>
<input name="btnsubmit" value="Submit" type="submit"></p>
</td>
</tr>
</table>
</form> <!--/* This is Staff Form */-->
答案 0 :(得分：3)
我稍微更改了你的代码，这很好用：
JSFiddle：Click。
还要确保使用
$(document).ready(function(){
});
请注意，我也更改了表单的格式，因此您没有表单中的表单。
代码HTML：
<legend><b><u>CASUALTIES SUMMARY CHART</u></b>
</legend>
<table>
<tr>
<td>
<label for="form">Casualty:</label>
</td>
<td>
<select id="myselect" name="myselect">
<option value="Student">Student</option>
<option value="Staff">Staff</option>
</select>
</td>
</tr>
</table>
<div id="studentForm">
<form id="casualties-Form" name="casualtiesForm" method="post" action="doCasualtiesForm.php">
<table>
<tr>
<td width="150px">
<label for="date">Date:</label>
</td>
<td>
<input type="date" id="date" name="Date" />
</td>
</tr>
<tr>
<td>
<label for="time">Time:</label>
</td>
<td>
<input type="time" id="time" name="Time" />
</td>
</tr>
<tr>
<td>ID:</td>
<td>
<input type="text" name="ID">
</td>
</tr>
<tr>
<td>
<label for="School">School</label>
</td>
<td>
<select>
<optgroup label="ss" name="School"></optgroup>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="Status">
</td>
</tr>
<tr>
<td>
<label for="Location">aaa</label>
</td>
<td>
<select id="Location" name="Location">
<option>aaa</option>
</select>
</td>
</tr>
<tr>
<td>Lecturer Contact No:</td>
<td>
<input type="text" name="Number">
</td>
</tr>
<tr>
<td>
<label for="NOK_informed">NOK Informed:</label>
</td>
<td>
<input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes" />Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" />No</td>
</tr>
<tr>
<td colspan="2">
<center>
<input name="btnsubmit" value="Submit" type="submit">
</center>
</td>
</tr>
</table>
</form>
</div>
<div id="staffForm">
<form id="casualties-Form" name="casualtiesForm" method="post" action="doCasualtiesForm.php">
<table>
<tr>
<td width="150px">
<label for="date">Date:</label>
</td>
<td>
<input type="date" id="date" name="Date" />
</td>
</tr>
<tr>
<td>
<label for="time">Time:</label>
</td>
<td>
<input type="time" id="time" name="Time" />
</td>
</tr>
<tr>
<td>ID:</td>
<td>
<input type="text" name="ID">
</td>
</tr>
<tr>
<td>
<label for="Department">Department</label>
</td>
<td>
<select id="Department" name="Department">
<option>bbb</option>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="Status">
</td>
</tr>
<tr>
<td>
<label for="Location">Hospital</label>
</td>
<td>
<select id="Location" name="Location">
<option>ccc</option>
</select>
</td>
</tr>
<tr>
<td>Officer Contact No:</td>
<td>
<input type="text" name="Number">
</td>
</tr>
<tr>
<td>
<label for="NOK_informed">NOK Informed:</label>
</td>
<td>
<input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes" />Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" />No</td>
</tr>
<tr>
<td colspan="2">
<center>
<input name="btnsubmit" value="Submit" type="submit">
</center>
</td>
</tr>
</table>
</form>
</div>
代码JS：
$(document).ready(function(){
$('#myselect').change(function(){
if ($(this).val() === "Student") {
$('#staffForm').hide();
$('#studentForm').show();
} else {
$('#studentForm').hide();
$('#staffForm').show();
}
});
});
答案 1 :(得分：0)
要实现此目的，您可以在选择
上使用onchange事件$(document).ready(function(){
$("#myselect").change(function(){
selVal = $(this).val();
$(".form-holder").slideUp("fast",function(){
$("#"+selVal).slideDown("fast");
});
});
});
<legend><b><u>CASUALTIES SUMMARY CHART</u></b></legend>
<table>
<tr>
<td><label for="form">Casualty:</label></td>
<td><select id="myselect" name="myselect" >
<option value="Student">Student</option>
<option value="Staff">Staff</option>
</select>
</td>
</tr>
<tr>
<td colspan='2'>
<div class='form-holder' id='Student'>
<form name="Student" >
<table>
<tr>
<td width="150px">
<label for="date">Date:</label></td>
<td><input type="date" id="date" name="Date"/></td>
</tr>
<tr>
<td><label for="time">Time:</label></td>
<td><input type="time" id="time" name="Time"/></td>
</tr>
<tr>
<td>ID:</td>
<td><input type="text" name="ID"></td>
</tr>
<tr>
<td><label for="School">School</label></td>
<td><select>
<optgroup label="ss" name="School">
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td><input type="text" name="Status"></td>
</tr>
<tr>
<td><label for="Location">aaa</label></td>
<td><select id="Location" name="Location">
<option>aaa </option>
</select>
</td>
</tr>
<tr>
<td>Lecturer Contact No:</td>
<td><input type="text" name="Number"></td>
</tr>
<tr>
<td><label for="NOK_informed">NOK Informed:</label></td>
<td>
<input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes"/>Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" /> No
</td>
</tr>
<tr>
<!--/* to let the submit button to be under the fields */-->
<td></td>
<td>
<input name="btnsubmit" value="Submit" type="submit"></p>
</td>
</tr>
</table>
</form> <!--/* This is Student Form */-->
</div>
</td>
</tr>
<tr>
<td colspan='2'>
<div class='form-holder' id='Staff' style='display:none;'>
<form name="Staff">
<table>
<tr>
<td width="150px"><label for="date">Date:</label></td>
<td><input type="date" id="date" name="Date"/></td>
</tr>
<tr>
<td><label for="time">Time:</label></td>
<td><input type="time" id="time" name="Time"/></td>
</tr>
<tr>
<td>ID:</td>
<td><input type="text" name="ID"></td>
</tr>
<tr>
<td><label for="Department">Department</label></td>
<td><select id="Department" name="Department">
<option>bbb</option>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td><input type="text" name="Status"></td>
</tr>
<tr>
<td><label for="Location">Hospital</label></td>
<td><select id="Location" name="Location">
<option>ccc</option>
</select>
</td>
</tr>
<tr>
<td>Officer Contact No:</td>
<td><input type="text" name="Number"></td>
</tr>
<tr>
<td><label for="NOK_informed">NOK Informed:</label></td>
<td><input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes"/>Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" /> No
</td>
</tr>
<tr>
<!--/* to let the submit button to be under the fields */-->
<td></td>
<td>
<input name="btnsubmit" value="Submit" type="submit"></p>
</td>
</tr>
</table>
</form> <!--/* This is Staff Form */-->
</div>
</td>
</tr>
</table>
这是你的Jsfiddle
答案 2 :(得分：0)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>RP Crisis Management</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table align="center" >
<td width="70%" height="122"><img src="LOGO.PNG" width="350" height="130" alt="left" /></td>
<td width="30%"><img src="RP_Logo.gif" alt="" width="316" height="119" align="right" /></td>
<tr>
<td width="75%" align="center" valign="top" style="background-position: left top;
background-repeat: no-repeat;"><marquee class="GeneratedMarquee" direction="left" scrollamount="9" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">
*Important Message!: </marquee></td>
<td rowspan="2">
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').change(function() {
if ($(this).val() === "Student") {
$('#staffForm').hide();
$('#studentForm').show();
} else {
$('#studentForm').hide();
$('#staffForm').show();
}
});
});
</script>
<h3><a href = "loginSuccess2.html">Home</a> | <a href = "logout.html"> Log Out </h3></a>
</td>
</tr>
<tr>
<td><h3>Welcome, BCM/CEP Taskforce </h3></td>
</tr>
<tr>
<td height="133" colspan="2">
<table width="100%" border="0">
<tr>
<td width="10%" valign="top">
<table width="100%" height="203" border="0" style="border: thin solid #000;">
<tr>
<td height="26" valign="top" style="border: thin none #000; padding: 5px; margin: 5px; color: #FFF; background-color: #6fb01e; font-weight: bold; font-size: 14px; font-family: Verdana, Geneva, sans-serif;">Navigation Bar</td>
</tr>
<tr>
<td>
<b><u>Track Incident</u></b><br/>
<a href = "BCM.html">View Incident (BCM)</a><br/>
<a href = "CEP.html">View Incident (CEP)</a><br/>
<br/>
<b><u>Maintenance</u></b><br/>
<a href = "addIncident.html">Add Incident</a><br/>
<a href= "addOpsLogForm.html">Add Operation Log</a><br/>
</td>
</tr>
</table>
</td><!-- /* The above code is for the Navigation Bar */ -->
<td width="50%" valign="top">
<table width="100%" height="auto" border="0" style="border: thin solid #000;">
<tr>
<td height="26" valign="top" style="border: thin none #000; padding: 5px; margin: 5px; color: #FFF; background-color: #6fb01e; font-weight: bold; font-size: 14px; font-family: Verdana, Geneva, sans-serif;">Add Casualties</td>
</tr>
<tr>
<td>
<legend><b><u>CASUALTIES SUMMARY CHART</u></b>
</legend>
<table>
<tr>
<td>
<label for="form">Casualty:</label>
</td>
<td>
<select id="myselect" name="myselect">
<option value="Student">Student</option>
<option value="Staff">Staff</option>
</select>
</td>
</tr>
</table>
<div id="studentForm">
<form id="casualties-Form" name="casualtiesForm" method="post" action="doCasualtiesForm.php">
<table>
<tr>
<td width="150px">
<label for="date">Date:</label>
</td>
<td>
<input type="date" id="date" name="Date" />
</td>
</tr>
<tr>
<td>
<label for="time">Time:</label>
</td>
<td>
<input type="time" id="time" name="Time" />
</td>
</tr>
<tr>
<td>Student ID:</td>
<td>
<input type="text" name="ID">
</td>
</tr>
<tr>
<td>
<label for="School">School</label>
</td>
<td>
<select>
<optgroup label="SOI" name="School">
<option>Diploma in Business Applications</option>
<option>Diploma in Business Information Systems</option>
<option>Diploma in Information Technology</option>
<option>Diploma in Interactive and Digital Media</option>
<option>Diploma in IT Service Management</option>
<option>Diploma in Mobile Software Development</option>
<option>Diploma in Infocomm Security Management</option>
<option>Specialist Diploma in Mobile Applications</option>
<option>Specialist Diploma in Business Analytics</option>
</optgroup>
<optgroup label="SOH" name="School">
<option>Diploma in Integrated Events Management</option>
<option>Diploma in Customer Experience Management with Business</option>
<option>Diploma in Hotel and Hospitality Management</option>
<option>Diploma in Wellness, Lifestyle and Spa Management</option>
<option>Diploma in Restaurant and Culinary Operations</option>
</optgroup>
<optgroup label="SAS" name="School">
<option>Diploma in Marine Science and Aquaculture</option>
<option>Diploma in Biomedical Sciences</option>
<option>Diploma in Biotechnology</option>
<option>Diploma in Materials Science</option>
<option>Diploma in Pharmaceutical Sciences</option>
<option>Diploma in Environmental Science</option>
</optgroup>
<optgroup label="SEG" name="School">
<option>Diploma in Aerospace Avionics</option>
<option>Diploma in Aerospace Engineering</option>
<option>Diploma in Aviation Management</option>
<option>Diploma in Electrical and Electronic Engineering</option>
<option>Diploma in Engineering Systems and Management</option>
<option>Diploma in Engineering Design with Business</option>
<option>Diploma in Green Building Energy Management</option>
<option>Diploma in Industrial and Operations Management</option>
<option>Diploma in Supply Chain Management</option>
</optgroup>
<optgroup label="SHL" name="School">
<option>Diploma in Health Management and Promotion</option>
<option>Diploma in Health Services Management</option>
<option>Diploma in Outdoor and Adventure Learning</option>
<option>Diploma in Sports and Exercise Sciences</option>
<option>Diploma in Sports and Leisure Management</option>
<option>Diploma in Sports Coaching</option>
</optgroup>
<optgroup label="STA" name="School">
<option>Diploma in Arts and Theatre Management</option>
<option>Diploma in Design for User Experience</option>
<option>Diploma in Game Design</option>
<option>Diploma in Media Production and Design</option>
<option>Diploma in Sonic Arts</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="Status">
</td>
</tr>
<tr>
<td>
<label for="Location">Hospital</label>
</td>
<td>
<select id="Location" name="Location">
<option>Alexandra Hospital</option>
<option>Changi General Hospital</option>
<option>Ng Teng Fong General Hospital</option>
<option>SengKang Health</option>
<option>National University Hospital</option>
<option>Khoo Teck Puat Hospital</option>
<option>Singapore General Hospital</option>
<option>Tan Tock Seng Hospital</option>
<option>KK Women's and Children's Hospital</option>
</select>
</td>
</tr>
<tr>
<td>Lecturer Contact No:</td>
<td>
<input type="text" name="Number">
</td>
</tr>
<tr>
<td>
<label for="NOK_informed">NOK Informed:</label>
</td>
<td>
<input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes" />Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" />No</td>
</tr>
<tr>
<td colspan="2">
<center>
<input name="btnsubmit" value="Submit" type="submit">
</center>
</td>
</tr>
</table>
</form>
</div>
<div id="staffForm">
<form id="casualties-Form" name="casualtiesForm" method="post" action="doCasualtiesForm.php">
<table>
<tr>
<td width="150px">
<label for="date">Date:</label>
</td>
<td>
<input type="date" id="date" name="Date" />
</td>
</tr>
<tr>
<td>
<label for="time">Time:</label>
</td>
<td>
<input type="time" id="time" name="Time" />
</td>
</tr>
<tr>
<td>Staff ID:</td>
<td>
<input type="text" name="ID">
</td>
</tr>
<tr>
<td>
<label for="Department">Department</label>
</td>
<td>
<select id="Department" name="Department">
<option>ACE@RP</option>
<option>COI-SCM</option>
<option>Centre for Educational Development</option>
<option>Centre for Enterprise and Communication</option>
<option>Logistics Project Office</option>
<option>Office of Academic Services</option>
<option>Office of Corporate Communications</option>
<option>Office of Estates</option>
<option>Office of Human Resources</option>
<option>Office for Finance</option>
<option>Office for Industry and Collaboration</option>
<option>Office of Information Services</option>
<option>Office of International Relations</option>
<option>Office of Organisation & Service Excellence</option>
<option>Office of Planning</option>
<option>Office of Procurement & Business Continuity</option>
<option>Office for Student and Graduate Affairs</option>
<option>Office of Technology Development</option>
<option>Office of Registrar</option>
<option>Principal's Office</option>
<option>School of Applied Science</option>
<option>School of Engineering</option>
<option>School of Hospitality</option>
<option>School of Infocomm</option>
<option>School of Sports, Health and Leisure</option>
<option>School of Technology for the Arts</option>
<option>SkillsFuture Office</option>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="Status">
</td>
</tr>
<tr>
<td>
<label for="Location">Hospital</label>
</td>
<td>
<select id="Location" name="Location">
<option>Alexandra Hospital</option>
<option>Changi General Hospital</option>
<option>Ng Teng Fong General Hospital</option>
<option>SengKang Health</option>
<option>National University Hospital</option>
<option>Khoo Teck Puat Hospital</option>
<option>Singapore General Hospital</option>
<option>Tan Tock Seng Hospital</option>
<option>KK Women's and Children's Hospital</option>
</select>
</td>
</tr>
<tr>
<td>CARE Officer Contact No:</td>
<td>
<input type="text" name="Number">
</td>
</tr>
<tr>
<td>
<label for="NOK_informed">NOK Informed:</label>
</td>
<td>
<input type="radio" id="NOK_informed" name="NOK" value="Yes" title="Yes" />Yes
<input type="radio" id="NOK_informed" name="NOK" value="No" />No</td>
</tr>
<tr>
<td colspan="2">
<center>
<input name="btnsubmit" value="Submit" type="submit">
</center>
</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>