javascript - jQuery语句是否复杂

我有一些jQuery语句，它们显示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-->

最佳答案

通过使用CSS和data- *属性，您可以编写更简洁的代码。我在主题和位置添加了data-column。更改年龄后，将同时填充两者，然后使用CSS显示或隐藏选项。

而且，正如其他答案所述，不要嵌套事件处理程序。事件处理程序的用途之一是在某些情况下不需要if / else。

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

关于javascript - jQuery语句是否复杂，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58975746/