Ed A Ed A - 1 year ago 89
jQuery Question

JQuery - reset all show'hide when first select is changed

I am building a show/hide select where secondary selects will show based on the first option. Chosen values then get printed in separate divs below.

The only thing I can't work out is how to reset everything. When the first select is changed, all secondary selects should go to default and the printed divs should be hidden.

I've read through the various solutions in this SO post and tried a few out with no success. Am i right in thinking it needs to go right before the first if statement?

My code:



$(document).ready(function() {

$("#course select").on('change', function() {
if ($(this).val() === "Phase1") {
$("#dipOp").show();
$("#degOp").show();
$("#english").show();
$("#fy").hide();
} else if ($(this).val() === "Phase2") {
$("#dipOp").show();
$("#degOp").hide();
$("#english").show();
$("#fy").hide();
} else if ($(this).val() === "Phase3") {
$("#dipOp").hide();
$("#degOp").show();
$("#english").show();
$("#fy").hide();
} else if ($(this).val() === "Phase4") {
$("#dipOp").show();
$("#degOp").show();
$("#english").hide();
$("#fy").hide();
} else if ($(this).val() === "Phase5") {
$("#dipOp").hide();
$("#degOp").show();
$("#fy").show();
$("#english").show();
} else if ($(this).val() === "Phase6") {
$("#dipOp").hide();
$("#degOp").hide();
$("#fy").show();
$("#english").show();
} else if ($(this).val() === "Phase7") {
$("#dipOp").hide();
$("#degOp").show();
$("#fy").show();
$("#english").hide();
}
});

$("#dipOp select").on('change', function() {
$('.dipOp').hide();
$('#' + $(this).val()).show();
});

$("#degOp select").on('change', function() {
$('.degOp').hide();
$('#' + $(this).val()).show();
});

});

.dipOp span, #english span, .degOp span, #fy span {display:inline-block; background:#0080b0; padding:10px; color:#ffffff;}
#dipOp, #degOp, #english, #fy {display: none}
select {margin-bottom:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="course">
<select name="Course">
<option value="empty">Select your packaged offer</option>
<option value="Phase1">English + Diploma 1 and 2 + University degree</option>
<option value="Phase1">English + Diploma 2 + University degree</option>
<option value="Phase2">English + Diploma Parts 1 and 2</option>
<option value="Phase2">English + Diploma Part 2</option>
<option value="Phase3">English + University degree</option>
<option value="Phase4">Diploma Parts 1 and 2 + University degree</option>
<option value="Phase4">Diploma Part 2 + University degree</option>
<option value="Phase5">English + Foundation Year + University degree</option>
<option value="Phase6">English + Foundation Year</option>
<option value="Phase7">Foundation Year + University degree</option>
</select>
</div>

<div id="dipOp">
<select Name="Diploma options">
<option value="empty">Select your diploma</option>
<option value="dip1">Diploma of Arts and Design</option>
<option value="dip2">Diploma of Arts (Communication, Journalism and Psychology)</option>
<option value="dip3">Diploma of Arts (Education)</option>
<option value="dip4">Diploma of Business (Business stream)</option>
<option value="dip5">Diploma of Business (Business Education)</option>
<option value="dip6">Diploma of Business (Commerce stream)</option>
<option value="dip7">Diploma of Business (Commerce Education)</option>
<option value="dip8">Diploma of Engineering Studies</option>
<option value="dip9">Diploma of Science</option>
<option value="dip10">Diploma of Science (Education)</option>
</select>
</div>

<div id="degOp">
<select Name="Degree options">
<option value="empty">Select your degree</option>
<option value="deg1">Bachelor of Emergency Health (Paramedic) (Honours)</option>
<option value="deg2">Bachelor of Health Science (Honours)</option>
<option value="deg3">Bachelor of Music (Honours)</option>
<option value="deg4">Bachelor of International Business</option>
<option value="deg5">Bachelor of Business and Bachelor of International Business</option>
<option value="deg6">Bachelor of Information Technology (Honours)</option>
<option value="deg7">Bachelor of Computer Science (Honours)</option>
<option value="deg8">Bachelor of Architectural Design</option>
<option value="deg9">Bachelor of Communication Design</option>
<option value="deg10">Bachelor of Industrial Design</option>
</select>
</div>
<!-- English -->
<div id="english"><p><span>English</span></p></div>
<!-- FY -->
<div id="fy"><p><span>Foundation Year</span></p></div>
<!-- Diplomas -->
<div id="dip1" class="dipOp" style="display:none"><p><span>Diploma of Arts and Design</span></p></div>
<div id="dip2" class="dipOp" style="display:none"><p><span>Diploma of Arts (Communication, Journalism and Psychology)</span></p></div>
<div id="dip3" class="dipOp" style="display:none"><p><span>Diploma of Arts (Education)</span></p></div>
<div id="dip4" class="dipOp" style="display:none"><p><span>Diploma of Business (Business stream)</span></p></div>
<div id="dip5" class="dipOp" style="display:none"><p><span>Diploma of Business (Business Education)</span></p></div>
<div id="dip6" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce stream)</span></p></div>
<div id="dip7" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce Education</span></p></div>
<div id="dip8" class="dipOp" style="display:none"><p><span>Diploma of Engineering Studies</span></p></div>
<div id="dip9" class="dipOp" style="display:none"><p><span>Diploma of Science</span></p></div>
<div id="dip10" class="dipOp" style="display:none"><p><span>Diploma of Science (Education)</span></p></div>
<!-- Degrees -->
<div id="deg1" class="degOp" style="display:none"><p><span>Bachelor of Emergency Health (Paramedic) (Honours)</span></p></div>
<div id="deg2" class="degOp" style="display:none"><p><span>Bachelor of Health Science (Honours)</span></p></div>
<div id="deg3" class="degOp" style="display:none"><p><span>Bachelor of Music (Honours)</span></p></div>
<div id="deg4" class="degOp" style="display:none"><p><span>Bachelor of International Business</span></p></div>
<div id="deg5" class="degOp" style="display:none"><p><span>Bachelor of Business and Bachelor of International Business</span></p></div>
<div id="deg6" class="degOp" style="display:none"><p><span>Bachelor of Information Technology (Honours)</span></p></div>
<div id="deg7" class="degOp" style="display:none"><p><span>Bachelor of Computer Science (Honours)</span></p></div>
<div id="deg8" class="degOp" style="display:none"><p><span>Bachelor of Architectural Design</span></p></div>
<div id="deg9" class="degOp" style="display:none"><p><span>Bachelor of Communication Design</span></p></div>
<div id="deg10" class="degOp" style="display:none"><p><span>Bachelor of Industrial Design</span></p></div>




Answer Source

Am i right in thinking it needs to go right before the first if statement?

Absolutely! The first thing you want to do on change of the first select is reset everything, by setting the value of the other two selects back to empty, and hiding them, as well as everything else that is hidden at first.

To make this task a bit easier, I wrapped your diplomas and degrees in a div, so you can hide all diplomas at once with $('#diplomas div').hide();.

$(document).ready(function() {
  $("#course select").on('change', function() {
  
    //reset
    $("#dipOp select, #degOp select").val('empty');
    $("#dipOp, #degOp").hide();
    $("#english, #fy").hide();
    $("#diplomas div, #degrees div").hide();
     
    if ($(this).val() === "Phase1") {
      $("#dipOp").show();
      $("#degOp").show();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase2") {
      $("#dipOp").show();
      $("#degOp").hide();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase3") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase4") {
      $("#dipOp").show();
      $("#degOp").show();
      $("#english").hide();
      $("#fy").hide();
    } else if ($(this).val() === "Phase5") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#fy").show();
      $("#english").show();
    } else if ($(this).val() === "Phase6") {
      $("#dipOp").hide();
      $("#degOp").hide();
      $("#fy").show();
      $("#english").show();
    } else if ($(this).val() === "Phase7") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#fy").show();
      $("#english").hide();
    }
  });
  
  $("#dipOp select").on('change', function() {
    $('.dipOp').hide();
    $('#' + $(this).val()).show();
  });
  
  $("#degOp select").on('change', function() {
    $('.degOp').hide();
    $('#' + $(this).val()).show();
  });
          
});
.dipOp span, #english span, .degOp span, #fy span {display:inline-block; background:#0080b0; padding:10px; color:#ffffff;}
#dipOp, #degOp, #english, #fy {display: none}
select {margin-bottom:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="course">
  <select name="Course">
    <option value="empty">Select your packaged offer</option>
    <option value="Phase1">English + Diploma 1 and 2 + University degree</option>
    <option value="Phase1">English + Diploma 2 + University degree</option>
    <option value="Phase2">English + Diploma Parts 1 and 2</option>
    <option value="Phase2">English + Diploma Part 2</option>
    <option value="Phase3">English + University degree</option>
    <option value="Phase4">Diploma Parts 1 and 2 + University degree</option>
    <option value="Phase4">Diploma Part 2 + University degree</option>
    <option value="Phase5">English + Foundation Year + University degree</option>
    <option value="Phase6">English + Foundation Year</option>
    <option value="Phase7">Foundation Year + University degree</option>
  </select>
</div>

<div id="dipOp">
    <select Name="Diploma options">
        <option value="empty">Select your diploma</option>
        <option value="dip1">Diploma of Arts and Design</option>
        <option value="dip2">Diploma of Arts (Communication, Journalism and Psychology)</option>
        <option value="dip3">Diploma of Arts (Education)</option>
        <option value="dip4">Diploma of Business (Business stream)</option>
        <option value="dip5">Diploma of Business (Business Education)</option>
        <option value="dip6">Diploma of Business (Commerce stream)</option>
        <option value="dip7">Diploma of Business (Commerce Education)</option>
        <option value="dip8">Diploma of Engineering Studies</option>
        <option value="dip9">Diploma of Science</option>
        <option value="dip10">Diploma of Science (Education)</option>
    </select>
 </div>
  
 <div id="degOp">
    <select Name="Degree options">
        <option value="empty">Select your degree</option>
        <option value="deg1">Bachelor of Emergency Health (Paramedic) (Honours)</option>
        <option value="deg2">Bachelor of Health Science (Honours)</option>
        <option value="deg3">Bachelor of Music (Honours)</option>
        <option value="deg4">Bachelor of International Business</option>
        <option value="deg5">Bachelor of Business and Bachelor of International Business</option>
        <option value="deg6">Bachelor of Information Technology (Honours)</option>
        <option value="deg7">Bachelor of Computer Science (Honours)</option>
        <option value="deg8">Bachelor of Architectural Design</option>
        <option value="deg9">Bachelor of Communication Design</option>
        <option value="deg10">Bachelor of Industrial Design</option>
    </select>
</div>
<!-- English -->
<div id="english"><p><span>English</span></p></div>
<!-- MUFY -->
<div id="fy"><p><span>Foundation Year</span></p></div>
<!-- Diplomas -->
<div id="diplomas">
  <div id="dip1" class="dipOp" style="display:none"><p><span>Diploma of Arts and Design</span></p></div>
  <div id="dip2" class="dipOp" style="display:none"><p><span>Diploma of Arts (Communication, Journalism and Psychology)</span></p></div>
  <div id="dip3" class="dipOp" style="display:none"><p><span>Diploma of Arts (Education)</span></p></div>
  <div id="dip4" class="dipOp" style="display:none"><p><span>Diploma of Business (Business stream)</span></p></div>
  <div id="dip5" class="dipOp" style="display:none"><p><span>Diploma of Business (Business Education)</span></p></div>
  <div id="dip6" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce stream)</span></p></div>
  <div id="dip7" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce Education</span></p></div>
  <div id="dip8" class="dipOp" style="display:none"><p><span>Diploma of Engineering Studies</span></p></div>
  <div id="dip9" class="dipOp" style="display:none"><p><span>Diploma of Science</span></p></div></div>
  <div id="dip10" class="dipOp" style="display:none"><p><span>Diploma of Science (Education)</span></p></div>
<!-- Degrees -->
<div id="degrees">
  <div id="deg1" class="degOp" style="display:none"><p><span>Bachelor of Emergency Health (Paramedic) (Honours)</span></p></div>
  <div id="deg2" class="degOp" style="display:none"><p><span>Bachelor of Health Science (Honours)</span></p></div>
  <div id="deg3" class="degOp" style="display:none"><p><span>Bachelor of Music (Honours)</span></p></div>
  <div id="deg4" class="degOp" style="display:none"><p><span>Bachelor of International Business</span></p></div>
  <div id="deg5" class="degOp" style="display:none"><p><span>Bachelor of Business and   Bachelor of International Business</span></p></div>
  <div id="deg6" class="degOp" style="display:none"><p><span>Bachelor of Information Technology (Honours)</span></p></div>
  <div id="deg7" class="degOp" style="display:none"><p><span>Bachelor of Computer Science (Honours)</span></p></div>
  <div id="deg8" class="degOp" style="display:none"><p><span>Bachelor of Architectural Design</span></p></div>
  <div id="deg9" class="degOp" style="display:none"><p><span>Bachelor of Communication Design</span></p></div>
  <div id="deg10" class="degOp" style="display:none"><p><span>Bachelor of Industrial Design</span></p></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download