为什么在以下情况下，下拉列表不会根据 select 框中 select 的值进行隐藏和显示？

Question

相关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>

我想在用户 select 选择 "Online Classroom" 时隐藏 select 控件，当用户 select 选择 "Traditional Classroom" 时应该显示相同的控件.

我已经编写了所有代码，但不明白为什么它不起作用？它不是隐藏和显示下拉菜单吗？请帮我。

以下是fiddlelink。 JSFIDDLE

Answer 1

这是因为您正在寻找一个名为 "block-time-term" 的 class，它还有一个名为 "checkbox-grid" 的 class：

$(".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();

或添加 class

FIDDLE

您还可以从 select 中删除 onchange="classroomChnage();，它不会产生任何影响，但会引发错误

更新

同时针对两个 classes 你只需要用 , 将它们分开：

$("select#classroom").val() === 'traditional' ? $('.block-time-term, .checkbox-grid').show() : $('.block-time-term, .checkbox-grid').hide();

NEW FIDDLE

Answer 2

只需在 class 名称之间输入 space 并在 div 中创建 ul。

<!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 () {
            $(this).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>

    <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>
    </div>
    </body>
    </html>

为什么在以下情况下，下拉列表不会根据 select 框中 select 的值进行隐藏和显示？

Why the drop downs are not getting hide and show based on value selected from the select box in following case?

html

javascript

jquery

show-hide

jsfiddle