以下是有关的HTML代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#classroom").change(function () {
$("select#classroom").val() === 'traditional' ? $('.block-time-term.checkbox-grid').show() : $('.block-time-term.checkbox-grid').hide();
});
});
</script>
</head>
<body>
<div>
<select name="classroom" id="classroom" style="height:50px; width:100%; font-size:13px;" onchange="classroomChnage();">
<option value="traditional">Traditional Classroom</option>
<option value="online">Online Classroom</option>
</select>
</div>
<div class="block-time-term" style="padding-bottom:10px;">
<!--<div class="pages_type_add_form_input" id="class_time">Class Timing </div>-->
<label style="margin-top:5px;">Starts at :</label>
<select name="hours_start" id="hours_start" style="font-size:13px;">
<option value="">hh</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minutes_start" id="minutes_start" style="font-size:13px;">
<option value="">mm</option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_start" id="am_pm_start" style="font-size:13px;">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<br><br>
<label style="margin-top:5px;">Ends at :</label>
<select name="hours_end" id="hours_end" style="margin-left:7px; font-size:13px;">
<option value="">hh</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minutes_end" id="minutes_end" style="font-size:13px;">
<option value="">mm</option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_end" id="am_pm_end" style="font-size:13px;">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
<ul class="checkbox-grid">
<li><input type="checkbox" name="chk_all_grp_day" value="value1" style="margin-left: 10px;" /><label>All</label></li>
<li><input type="checkbox" name="val[grp_day][]" value="Mon" style="margin-left: 10px;" /><label for="text2">Mon</label></li>
<li><input type="checkbox" name="val[grp_day][]" value="Tue" style="margin-left: 10px;" /><label for="text3">Tue</label></li>
<li><input type="checkbox" name="val[grp_day][]" value="Wed" style="margin-left: 10px;" /><label for="text4">Wed</label></li>
<li><input type="checkbox" name="val[grp_day][]" value="Thu" style="margin-left: 10px;" /><label for="text5">Thu</label></li>
<li><input type="checkbox" name="val[grp_day][]" value="Fri" style="margin-left: 10px;" /><label for="text6">Fri</label></li>
<li><input type="checkbox" name="val[grp_day][]" value="Sat" style="margin-left: 10px;" /><label for="text7">Sat</label></li>
<li><input type="checkbox" name="val[grp_day][]" value="Sun" style="margin-left: 10px;" /><label for="text8">Sun</label></li>
</ul>
</body>
</html>
我想在用户选择“在线教室”选项时隐藏选择控件，并且在用户选择“传统教室”时应显示相同的控件。
我已经写了所有代码，但不明白为什么它不起作用？它不是在隐藏并显示下拉菜单吗？请帮我。
以下是小提琴链接。JSFIDDLE
这是因为您正在寻找一个名为“ block-time-term”的类，而该类也具有一个名为“ checkbox-grid”的类：
$(".block-time-term.checkbox-grid")
但是您的HTML仅有.block-time-term：
<div class="block-time-term" style="padding-bottom:10px;">
因此更改为：
$("select#classroom").val() === 'traditional' ? $('.block-time-term').show() : $('.block-time-term').hide();
或添加该类
你也可以删除onchange="classroomChnage();从你的select，它不影响任何东西，但它抛出一个错误
更新
两个目标同时定位两个类，您只需要使用,：即可将它们分开：
$("select#classroom").val() === 'traditional' ? $('.block-time-term, .checkbox-grid').show() : $('.block-time-term, .checkbox-grid').hide();
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句