JQuery - 在第一次选择更改时重置所有show'hide

Question

我正在构建一个显示/隐藏选择，其中辅助选择将根据第一个选项显示。选择的值然后打印在下面的单独div中。

我唯一无法解决的问题是如何重置一切。更改第一个选择后，所有辅助选择都应为默认值，并且应隐藏打印的div。

我已经阅读了SO post中的各种解决方案，并尝试了一些没有成功的解决方案。我是否正确地认为它需要在第一个if语句之前出现？

我的代码：

$(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 1

  

我是否正确地认为它需要在第一个if语句之前出现？

绝对！您想要更改第一个选择的第一件事是重置所有内容，方法是将其他两个选项的值设置回empty，并隐藏它们，以及首先隐藏的所有其他内容。 / p>

为了使这项任务更容易，我将你的文凭和学位包括在一个div中，这样你就可以用$('#diplomas div').hide();一次隐藏所有的文凭。

＆＃13;

＆＃13;

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

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在更改时，您需要做的第一件事是隐藏所有选择，显示所有先前选择的选项（'度'divs（蓝色标签）），然后将选项重置为空（这样您就可以开始了）再一次）。

  $("#course select").on('change', function() {
       //Right here is where you want to make sure you reset everything
       //Hide all previous deg10,deg1 selected too
       // reset all selects to empty
        if ($(this).val() === "Phase1") {

        }
  } 

对于显示的所有“度”蓝色div，你应该将它们全部包装在一个div中，以便于jQuery访问以隐藏它们。请查看我在html中创建的包装器，它包装了所有蓝色标记的度数。 <div class='degree_container'>以及此jsfiddle中的代码。这应该会得到你想要的。 https://jsfiddle.net/t3dmspnp/1/