Complicated if else jQuery statements

Question

I've got some jQuery statements which show a div dependant on some selections a user makes from a dropdown/select field.

I was wondering if this is the correct way of doing it? The div showing depends on the answers given in all of the dropdown/select fields (3 selects/dropdowns), but sometimes the div that is only meant to show dependant on that logic shows anyway on other options within the select/dropdown.

Below is my code:

 $(function() { $('.age').on('change', function() { if ($(this).val() === "col1") { $('.subject').on('change', function() { if ($(this).val() === "col1_ge") { $('.location').change(function() { $('#sbcox-ge').toggle($(this).val() == 'col1_sbco'); }); } else if ($(this).val() === "col1_ss") { $('.location').change(function() { $('#sbcox-ss').toggle($(this).val() == 'col1_sbco'); }); } else {} }); } else if ($(this).val() === "col2") {} else {} }); }); $(document).ready(function() { $("#subject_select").children('option:gt(0)').hide(); $("#area_select").children('option:gt(0)').hide(); $("#age_select").change(function() { $("#subject_select").children('option').hide(); $("#subject_select").children("option[value^=" + $(this).val() + "]").show() $("#area_select").children('option').hide(); $("#area_select").children("option[value^=" + $(this).val() + "]").show() }) })

 .inner-modal { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="decider-form"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="age_select" id="age_select" class="age"> <option value="age-fill">1. Age</option> <option value="col1">8</option> <option value="col1">9</option> <option value="col1">10</option> <option value="col2">11</option> <option value="col3">12</option> <option value="col4">13</option> <option value="col5">14</option> <option value="col6">15</option> <option value="col7">16</option> <option value="col8">17</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="subject_select" id="subject_select" class="subject"> <option value="subject-fill">2. Subject</option> <.--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1_subject-fill">2. Subject</option> <option value="col1_ge">GE</option> <option value="col1_ss">SS</option> <.--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_subject-fill">2. Subject</option> <option value="col2_ge">GE</option> <option value="col2_ss">SS</option> <.--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm">layout 4</option> <option value="col3_sms">layout 5</option> <option value="col4_mss">layout test 4</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="area_select" id="area_select" class="location"> <option value="location-fill">3. Location</option> <!--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1_location-fill">3. Location</option> <option value="col1_sbco">SBCO</option> <!--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_location-fill">3. Location</option> <option value="col2_sbco">SBCO</option> <option value="col2_sbcc">SBCC</option> <!--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm">layout 4</option> <option value="col3_sms">layout 5</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12" id="button-overall"> <div class="call-to-action"> <a class="call-action" href="#">See Your Course</a> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge"> <div class="call-to-action"> <a class="call-action" href="link here" target="_blank">See GE</a> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss"> <div class="call-to-action"> <a class="call-action" href="link here" target="_blank">See SS</a> </div> </div> </div> <!--End Row--> </div> <!--End Container--> </div> <!--End Decider Form-->

Answer 1

Don't bind event handlers inside other event handlers. Just have the dependent events check the values of the other inputs when they run.

 $(function() { $(".location").change(function() { var age = $(".age").val(); var subject = $(".subject").val(); if (age == "col1") { if (subject == "col1_ge") { $("#sbcox-ge").toggle($(this).val() == "col1_sbco"); } else if (subject == "col1_ss") { $("#sbcox-ss").toggle($(this).val() == "col1_sbco"); } else {} } else if (age == "col2") {} else {} }); $("#subject_select").children('option:gt(0)').hide(); $("#area_select").children('option:gt(0)').hide(); $("#age_select").change(function() { $("#subject_select").children('option').hide(); $("#subject_select").children("option[value^=" + $(this).val() + "]").show() $("#area_select").children('option').hide(); $("#area_select").children("option[value^=" + $(this).val() + "]").show() }) })

 .inner-modal { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="decider-form"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="age_select" id="age_select" class="age"> <option value="age-fill">1. Age</option> <option value="col1">8</option> <option value="col1">9</option> <option value="col1">10</option> <option value="col2">11</option> <option value="col3">12</option> <option value="col4">13</option> <option value="col5">14</option> <option value="col6">15</option> <option value="col7">16</option> <option value="col8">17</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="subject_select" id="subject_select" class="subject"> <option value="subject-fill">2. Subject</option> <.--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1_subject-fill">2. Subject</option> <option value="col1_ge">GE</option> <option value="col1_ss">SS</option> <.--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_subject-fill">2. Subject</option> <option value="col2_ge">GE</option> <option value="col2_ss">SS</option> <.--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm">layout 4</option> <option value="col3_sms">layout 5</option> <option value="col4_mss">layout test 4</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="area_select" id="area_select" class="location"> <option value="location-fill">3. Location</option> <!--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1_location-fill">3. Location</option> <option value="col1_sbco">SBCO</option> <!--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_location-fill">3. Location</option> <option value="col2_sbco">SBCO</option> <option value="col2_sbcc">SBCC</option> <!--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm">layout 4</option> <option value="col3_sms">layout 5</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12" id="button-overall"> <div class="call-to-action"> <a class="call-action" href="#">See Your Course</a> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge"> <div class="call-to-action"> <a class="call-action" href="link here" target="_blank">See GE</a> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss"> <div class="call-to-action"> <a class="call-action" href="link here" target="_blank">See SS</a> </div> </div> </div> <!--End Row--> </div> <!--End Container--> </div> <!--End Decider Form-->

Answer 2

With a bit of CSS and data-* attribute you can write cleaner code. I added data-column to subject and location. Once age is changed both are populated and then with CSS the options are shown or hidden.

Also, as said with other answers don't nest event handlers. One of the uses of event handlers is to eliminate the need for if/else in some cases.

 $(document).ready(function() { let age_select = $("#age_select"); let subject_select = $("#subject_select"); let area_select = $("#area_select"); age_select.on("change", function() { let currentCol = jQuery(this).val(); // When age is changed reset other dropdown (by setting value to the default one) // and trigger change for the event handler to be called subject_select.attr("data-column", currentCol).val('subject-fill').trigger('change'); area_select.attr("data-column", currentCol).val('location-fill').trigger('change'); }); // if subject is changed reset location and trigger change subject_select.on("change", function() { area_select.val('location-fill').trigger('change'); }); area_select.on("change", function() { let currentLocation = jQuery(this).val(); let subject = subject_select.val(); // If dropdown change is triggers then check if it is default value // if so then hide links if (currentLocation == 'location-fill') { $('#sbcox-ge,#sbcox-ss').toggle(false); return; } // if not default value then show the related link based on subject selection $('#sbcox-ge').toggle(subject.indexOf("ge") > -1); $('#sbcox-ss').toggle(subject.indexOf("ss") > -1); }); })

 .inner-modal { display: none; } #subject_select option:not([value='subject-fill']) { display: none; } #area_select option:not([value='location-fill']) { display: none; } #subject_select[data-column='col1'] option[value^='col1'], #subject_select[data-column='col2'] option[value^='col2'], #subject_select[data-column='col3'] option[value^='col3'] { display: block; } #area_select[data-column='col1'] option[value^='col1'], #area_select[data-column='col2'] option[value^='col2'], #area_select[data-column='col3'] option[value^='col3'] { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="decider-form"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="age_select" id="age_select" class="age"> <option value="age-fill">1. Age</option> <option value="col1">8</option> <option value="col1">9</option> <option value="col1">10</option> <option value="col2">11</option> <option value="col3">12</option> <option value="col4">13</option> <option value="col5">14</option> <option value="col6">15</option> <option value="col7">16</option> <option value="col8">17</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="subject_select" id="subject_select" class="subject" data-column=''> <option value="subject-fill">2. Subject</option> <.--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1_ge">GE</option> <option value="col1_ss">SS</option> <!--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_ge">GE</option> <option value="col2_ss">SS</option> <!--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm">layout 4</option> <option value="col3_sms">layout 5</option> <option value="col4_mss">layout test 4</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12"> <select name="area_select" id="area_select" class="location" data-column=''> <option value="location-fill">3. Location</option> <!--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1_sbco">SBCO</option> <!--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_sbco">SBCO</option> <option value="col2_sbcc">SBCC</option> <!--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm">layout 4</option> <option value="col3_sms">layout 5</option> </select> </div> <div class="col-lg-3 col-md-3 col-sm-12" id="button-overall"> <div class="call-to-action"> <a class="call-action" href="#">See Your Course</a> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge"> <div class="call-to-action"> <a class="call-action" href="link here" target="_blank">See GE</a> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss"> <div class="call-to-action"> <a class="call-action" href="link here" target="_blank">See SS</a> </div> </div> </div> <!--End Row--> </div> <!--End Container--> </div> <!--End Decider Form-->