为什么在以下情况下，下拉菜单不会根据从选择框中选择的值隐藏和显示？答案

【问题标题】：Why the drop downs are not getting hide and show based on value selected from the select box in following case?为什么在以下情况下，下拉菜单不会根据从选择框中选择的值隐藏和显示？
【发布时间】：2015-01-14 05:47:16
【问题描述】：

以下是相关的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

【问题讨论】：

标签： javascript jquery html show-hide jsfiddle

【解决方案1】：

这是因为您正在寻找一个名为“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();

或添加该类

FIDDLE

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

更新

两个同时针对两个类，您只需用, 将它们分开即可：

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

NEW FIDDLE

【讨论】：

但是显示日期名称的第二个下拉菜单仍然可见，它没有被隐藏。我也想隐藏该下拉菜单。怎么做？我们可以同时在同一行代码中完成，而不是分别编写两个代码吗？我试过了，但没有成功。

【解决方案2】：

只需在类名之间留出空格，然后在 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>

【讨论】：