个人中心
gpt4 book ai didi

javascript - JQuery - 当第一个选择更改时重置所有显示'隐藏

转载 作者：行者123 更新时间：2023-12-01 01:13:29 24 4
gpt4 key购买 nike

我正在构建一个显示/隐藏选择，其中辅助选择将根据第一个选项显示。然后，选择的值将打印在下面单独的 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>

最佳答案

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

绝对是!更改第一个选择时要做的第一件事是重置所有内容，方法是将其他两个选择的值设置回 empty ，并隐藏它们，以及最初隐藏的所有其他内容。

为了使这项任务更容易一些，我将您的文凭和学位包装在一个 div 中，这样您就可以使用 $('#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>

关于javascript - JQuery - 当第一个选择更改时重置所有显示'隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45725772/

24 4 0
文章推荐： php - Laravel orderBy 与列值
文章推荐： javascript - font Awesome包中的all.js和其他JS文件的作用是什么？
文章推荐： jQuery DataTable - 搜索一列下拉列表
文章推荐： javascript - typescript 根据给定值返回键数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com