如何使用基于选择菜单选项的 jQuery 更改多个表行
How to chang multiple table rows using jQuery based upon a selection menu choice
如果这个问题已经被问过，请告诉我在哪里可以找到答案
我正在尝试创建一个表单，该表单将根据下拉菜单中的选择显示不同的表格行。在使用JavaScript时，我已经成功地完成了这个任务，但是我现在正在尝试从JavaScript迁移到jQuery，并且很难找出要使用的正确函数。
这是一个JSFiddle文件，其中包含JavaScript编码
。
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var dd = d.getDay();
var day1;
var day2;
var d_d = d.getMonth();
switch (d_d) {
case 0:
day2 = "January";
break;
case 1:
day2 = "February";
break;
case 2:
day2 = "March";
break;
case 3:
day2 = "April";
break;
case 4:
day2 = "May";
break;
case 5:
day2 = "June";
break;
case 6:
day2 = "July";
break;
case 7:
day2 = "August";
break;
case 8:
day2 = "September";
break;
case 9:
day2 = "October";
break;
case 10:
day2 = "Novmber";
break;
case 11:
day2 = "December";
break;
}
switch (dd) {
case 0:
day1 = "Sunday";
break;
case 1:
day1 = "Monday";
break;
case 2:
day1 = "Tuesday";
break;
case 3:
day1 = "Wednesday";
break;
case 4:
day1 = "Thursday";
break;
case 5:
day1 = "Friday";
break;
case 6:
day1 = "Saterday";
break;
}
document.getElementById("day").value = day1;
document.getElementById("time").value = d.toLocaleTimeString();
document.getElementById("date").value = day2 + " " + d.getDate();
}
function salad() {
var storenumber = document.getElementById("storenumber");
switch (storenumber.value) {
case "011169":
case "008181":
document.getElementById("frig1").classList.remove("hide");
document.getElementById("frig2").classList.remove("hide");
document.getElementById("frig3").classList.remove("hide");
document.getElementById("saladbar").classList.remove("hide");
document.getElementById("barcheese").classList.remove("hide");
break;
case "010576":
case "010324":
case "008615":
case "009150":
case "014640":
case "010684":
case "011168":
case "014215":
case "008179":
case "008339":
case "008668":
case "031574":
document.getElementById("frig1").classList.add("hide");
document.getElementById("frig2").classList.add("hide");
document.getElementById("frig3").classList.add("hide");
document.getElementById("saladbar").classList.add("hide");
document.getElementById("barcheese").classList.add("hide");
break;
}
}header {
text-align: center;
}
td {
border: solid thin #000000;
background-color: #FF0000;
}
th {
border: solid thin #000000;
width: 300px;
background-color: #FF0000;
}
.required {
color: #FFF500;
}
.left {
text-align: right;
width: 500px;
}
.noborder {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
body {
background-color: #061BFF;
}
.nobordererror {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
.hide {
display: none;
}<body>
<section>
<table cellspacing="0px">
<tr>
<th colspan="2" class="noborder">
<h1>Food Safety Checklist</h1>
</th>
</tr>
<tr>
<th colspan="2" class="noborder"><span class="required">*</span>=Required feilds</th>
</tr>
<!-- Identification Information section -->
<tr>
<td class="left"><span class="required">*</span>Store Number:</td>
<td>
<select id="storenumber" name="storenumber" required title="Please select your store ID number" onChange="salad()">
<option value="">Select Store Number</option>
<option value="010576">010576</option>
<option value="011169">011169</option>
<option value="008181">008181</option>
<option value="010324">010324</option>
<option value="008615">008615</option>
<option value="009150">009150</option>
<option value="014640">014640</option>
<option value="010684">010684</option>
<option value="011168">011168</option>
<option value="014215">014215</option>
<option value="008179">008179</option>
<option value="008339">008339</option>
<option value="008668">008668</option>
<option value="031574">031574</option>
</select>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Day:</td>
<td>
<input type="text" size="7" name="day" id="day" title="Enter current Day" required>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Date:</td>
<td>
<input type="text" size="9" name="date" id="date" required title="Please enter current date">
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Time:</td>
<td>
<input type="text" size="9" name="time" id="time" title="Enter current time" required>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Initials:</td>
<td>
<input name="initial" type="text" required id="initial" maxlength="2" size="3" title="Enter User ID">
</td>
</tr>
<tr>
<td colspan="2" class="noborder"> </td>
</tr>
<!-- Thermometer Calibration -->
<tr>
<th colspan="2" class="noborder">Thermometer</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Thermometers Calibrated:</td>
<td>
<label>
<input name="cal" type="radio" required id="cal_0" value="Yes" onChange="yesNo(this)">Yes</label>
<label>
<input name="cal" type="radio" required id="cal_1" value="No" onChange="yesNo(this)">No</label>
</td>
<td class="noborder"></td>
</tr>
<tr>
<td colspan="2" class="noborder"> </td>
</tr>
<!-- Cold Temps -->
<tr>
<th colspan="2" class="noborder">Cold Temperature Managment</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Air Temp (bottom):</td>
<td>
<input name="bottomair" type="text" required id="bottomair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Air Temp (top):</td>
<td>
<input name="topair" type="text" required id="topair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Meat Temp:</td>
<td>
<input name="meat" type="text" required id="meat" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Cheese Temp:</td>
<td>
<input name="cheese" type="text" required id="cheese" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Walk In Cooler Temp:</td>
<td>
<input name="walkin" type="text" required id="walkin" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig1" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
<td>
<input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig2" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
<td>
<input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig3" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #3:</td>
<td>
<input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #1:</td>
<td>
<input name="freez1" type="text" required id="freez1" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #2:</td>
<td>
<input name="freez2" type="text" required id="freez2" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #3:</td>
<td>
<input name="freez3" type="text" required id="freez3" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="saladbar" class="hide">
<td class="left"><span class="required">*</span>Salad Bar Air Temp:</td>
<td>
<input name="saladair" type="text" required id="saladair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="barcheese" class="hide">
<td class="left"><span class="required">*</span>Salad Bar Cheese Temp:</td>
<td>
<input name="saladcheese" type="text" required id="saladcheese" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Hot Temp section -->
<tr>
<th class="noborder" colspan="2">Hot Temperature Management</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Wing Temp:</td>
<td>
<input name="wing" type="text" required id="wing" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Meat Sauce/Soups Temp:</td>
<td>
<input name="sauce" type="text" required id="sauce" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hot Hold Timing System:</td>
<td>
<label>
<input name="hothold" type="radio" required id="hothold_0" value="Yes">Yes</label>
<label>
<input name="hothold" type="radio" required id="hothold_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Oven Managment -->
<tr>
<th class="noborder" colspan="2">Oven Management</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Pizza Tepmp:</td>
<td>
<input name="pizza" type="text" required id="pizza" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Pasta Temp:</td>
<td>
<input name="pasta" type="text" required id="pasta" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Oven speed and temp only needsto be done once a week -->
<tr>
<th class="noborder" colspan="2">Oven Temperatures and Speeds</th>
</tr>
<tr>
<td class="left">Top Oven:</td>
<td>Temp:
<input name="toptemp" type="text" id="toptemp" maxlength="3" size="4">
<br/>Speed:
<input name="topspeed" type="text" id="topspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="left">Center Oven:</td>
<td>Temp:
<input name="centertemp" type="text" id="centertemp" maxlength="3" size="4">
<br/>Speed:
<input name="centerspeed" type="text" id="centerspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="left">Bottom Oven:</td>
<td>Temp:
<input name="bottomtemp" type="text" id="bottomtemp" maxlength="3" size="4">
<br/>Speed:
<input name="bottomspeed" type="text" id="bottomspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- This is the Yes/No section of the checklist Food Handling Section -->
<tr>
<th class="noborder" colspan="2">Food Hangling</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
<td>
<label>
<input name="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
<label>
<input name="approve" type="radio" required id="approve_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>No Spoiled/Expired food present:</td>
<td>
<label>
<input name="expired" type="radio" required id="expired_0" value="Yes">Yes</label>
<label>
<input name="expired" type="radio" required id="expired_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Wing Street Raw Zone Process Followed:</td>
<td>
<label>
<input name="raw" type="radio" required id="raw_0" value="Yes">Yes</label>
<label>
<input name="raw" type="radio" required id="raw_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Foodis Correcctly Date/Labeled & FIFO is followed:</td>
<td>
<label>
<input name="fifo" type="radio" required id="fifo_0" value="Yes">Yes</label>
<label>
<input name="fifo" type="radio" required id="fifo_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Whole Produce is Washed:</td>
<td>
<label>
<input name="produce" type="radio" required id="produce_0" value="Yes">Yes</label>
<label>
<input name="produce" type="radio" required id="produce_1" value="No">No</label>
</td>
</tr>
<!-- Sanitation Section -->
<tr>
<td class="left"><span class="required">*</span>Sanitizer is at Correct PPM:</td>
<td>
<label>
<input name="ppm" type="radio" required id="ppm_0" value="Yes">Yes</label>
<label>
<input name="ppm" type="radio" required id="ppm_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hot Water ≥ 120°F at 3-Comp. Sink:</td>
<td>
<label>
<input name="hotwater" type="radio" required id="hotwater_0" value="Yes">Yes</label>
<label>
<input name="hotwater" type="radio" required id="hotwater_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Dishwasher has Soap & Sanitizer or ≥ 180°F Water:</td>
<td>
<label>
<input name="soap" type="radio" required id="soap_0" value="Yes">Yes</label>
<label>
<input name="soap" type="radio" required id="soap_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Chemicals stored Correctly:</td>
<td>
<label>
<input name="chem" type="radio" required id="chem_0" value="Yes">Yes</label>
<label>
<input name="chem" type="radio" required id="chem_1" value="No">No</label>
</td>
</tr>
<!-- Health & Hygiene Section -->
<tr>
<th class="left"><span class="required">*</span>No Ill Team Members Working:</th>
<td>
<label>
<input name="illteam" type="radio" required id="illteam_0" value="Yes">Yes</label>
<label>
<input name="illteam" type="radio" required id="illteam_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Correct Hand Washing Procedures Followed:</td>
<td>
<label>
<input name="wash" type="radio" required id="wash_0" value="Yes">Yes</label>
<label>
<input name="wash" type="radio" required id="wash_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hand Sinks (Including Restrooms) are Stocked, Accessible & Used Properly:</td>
<td>
<label>
<input name="sinks" type="radio" required id="sinks_0" value="Yes">Yes</label>
<label>
<input name="sink" type="radio" required id="sinks_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hair Restraints Worn Correctly:</td>
<td>
<label>
<input name="hair" type="radio" required id="hair_0" value="Yes">Yes</label>
<label>
<input name="hair" type="radio" required id="hair_1" value="No">No</label>
</td>
</tr>
<!-- Pest Management Section -->
<tr>
<td class="left"><span class="required">*</span>Pest Infestation or Activity is not Present and All Traps Placed Correctly:</td>
<td>
<label>
<input name="pest" type="radio" required id="pest_0" value="Yes">Yes</label>
<label>
<input name="pest" type="radio" required id="pest_1" value="No">No</label>
</td>
</tr>
</table>
</section>
</body>同样，jquery 函数的目标应该是根据选定的"存储 ID"隐藏/显示几个表行。
提前感谢您的任何和所有帮助
jQuery 版本：
document.getElementById("frig1").classList.add("hide");
是
$("#frig1").hide();
要显示该元素，您可以使用
$("#frig1").show();
隐藏多个元素，可以使用：
$("#frig1, #frig2").hide();
相关文章：
- 使用jQuery选项卡来显示或隐藏其他内容
- 如何将导航菜单链接到jQuery选项卡
- jQuery选项卡出现问题
- 单击选项卡时jquery选项卡选择不起作用
- 使用Jquery选项卡禁用Accordion操作
- PHP Jquery选项卡:内容加载到一个选项卡's面板
- 在 jquery 选项卡中查找 span 标记并返回该索引
- 遍历下一个和上一个 jQuery 选项卡
- 防止Jquery选项卡中的dafail操作
- Jquery选项卡:打破创建-选择-重新加载循环
- jquery选项卡加载Ajax内容
- Jquery选项卡容器不工作(未检测到，tabs(）函数）
- jQuery选项卡的自定义脚本
- Jquery选项卡单击时高亮显示'下一步'按钮
- 正在从maphilight href加载Jquery选项卡
- javascript/jquery选项卡在IE7、8或9中不起作用
- jquery选项卡和js加载内容
- 带有链接的jquery选项卡会记住最后一个活动项
- JQuery选项卡没有't工作-没有错误
- JQuery 选项卡内容帮助 - 1.4.
