Why the drop downs are not getting hide and show based on value selected from the select box in following case?
Question
Following is the concerned HTML code:
<!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>
I want to hide the select controls when user selects the option "Online Classroom" and the same should be displayed when user selects "Traditional Classroom".
I've written all the code but not understanding why its' not functioning? It's not hiding and showing the drop downs? Please help me.
Following is the fiddle link. JSFIDDLE
2 answers
solution1
1 ACCPTED 2015-01-14 05:52:13
It's because you're looking for a class called "block-time-term" that also has a class called "checkbox-grid":
$(".block-time-term.checkbox-grid")
but your HTML just has .block-time-term :
<div class="block-time-term" style="padding-bottom:10px;">
so change to:
$("select#classroom").val() === 'traditional' ? $('.block-time-term').show() : $('.block-time-term').hide();
or add that class
you can also remove onchange="classroomChnage(); from your select , it's not effecting anything but it is throwing an error
UPDATE
Two target both classes at the same time you just need to separate them with a , :
$("select#classroom").val() === 'traditional' ? $('.block-time-term, .checkbox-grid').show() : $('.block-time-term, .checkbox-grid').hide();
solution2
0 2015-01-14 06:23:14
Just give space between class name and make the ul within the div.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
using jQuery show and hide options of one select box from the value selected of another select box
javascript drop downs hide/show table rows based on values
Want to show/hide text box having date picker when certain value is selected from drop down
JavaScript to show in label each selected value of drop downs in a table
Removing a Selected Value in Drop-downs from a Data-list
Show/Hide Field Based on Option Value in Select Box
Show input box o if value from drop down menu is selected
Getting the selected value from a drop down box placed in a div
Atleast one drop down value must be selected from multiple drop downs using jquery validation plugin
Show and Hide select box based on 2 button clicks
Related Tags