javascript - jQuery - 隐藏更改下拉列表时出错

Question

您好实际上我想根据第一个下拉列表中的值显示一个新的下拉列表。在这里，我可以在选择时显示下拉菜单，但如果我们选择其他一些选项，我无法隐藏其他下拉菜单。因此，如果我们选择“buyer-contact-details”，我们应该显示 lst1 下拉菜单。如果我们选择“supplier-contact-details”，lst1 下拉菜单会隐藏，lst2 应该会显示出来。请帮我。

$(document).ready(function() {
  $(".deny-lst").on("change", function() {
    if ($(this).val() == "buyer-contact-details") {
      $(".lst1").slideDown();
    } else if ($(this).val() == "supplier-contact-details") {
      $(".lst2").slideDown();
    } else if ($(this).val() == "other-to-deny") {
      $(".lst3").slideDown();
    } else {
      $(".lst1, .lst2, lst3").slideUp();
    }
  });

  $(".lst3").on("change", function() {
    if ($(this).val() == "other") {
      $(".textarea").slideDown();
    } else {
      $(".textarea").slideUp();
    }
  });
})

.textarea {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <select class="form-control input-md deny-lst">
    <option> Please Select </option>
    <option value="buyer-contact-details">Buyer shared their contact details</option>
    <option value="supplier-contact-details">Supplier shared their contact details</option>
    <option value="other-to-deny">Other Reason</option>
  </select>
  <select class="form-control input-md lst1" style="display:none;">
    <option> Please Select </option>
    <option>Option1</option>
    <option>Option2</option>

  </select>
  <select class="form-control input-md lst2" style="display:none;">
    <option> Please Select </option>
    <option>Option1</option>
    <option>Option2</option>

  </select>
  <select class="form-control input-md lst3" style="display:none;">
    <option> Please Select </option>
    <option>Option1</option>
    <option>Option2</option>
    <option value="other">Other</option>
  </select>
  <div class="textarea">
    <div class="form-group">
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </div>
</div>

标签： javascriptjquery

Answer 1

您正在显示必须显示的下拉菜单，但您没有隐藏不需要的下拉菜单。请参阅更改处理程序下的第一行。

http://jsfiddle.net/dnr1bocv/

$(document).ready(function() {
  $(".deny-lst").on("change", function() {
    $(".lst1, .lst2, lst3").slideUp();
    if ($(this).val() == "buyer-contact-details") {
      $(".lst1").slideDown();
    } else if ($(this).val() == "supplier-contact-details") {
      $(".lst2").slideDown();
    } else if ($(this).val() == "other-to-deny") {
      $(".lst3").slideDown();
    } else {
      $(".lst1, .lst2, lst3").slideUp();
    }
  });

  $(".lst3").on("change", function() {
    if ($(this).val() == "other") {
      $(".textarea").slideDown();
    } else {
      $(".textarea").slideUp();
    }
  });
})