javascript - 复杂的 if else jQuery 语句

Question

我有一些 jQuery 语句，它们显示一个 div，该 div 取决于用户从下拉/选择字段中所做的一些选择。

我想知道这是否是正确的做法？显示的 div 取决于所有下拉列表/选择字段(3 个选择/下拉列表)中给出的答案，但有时仅根据该逻辑显示的 div 无论如何都会显示选择/下拉列表中的其他选项。

下面是我的代码:

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

不要将事件处理程序绑定(bind)到其他事件处理程序内。只需让相关事件在运行时检查其他输入的值即可。

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