Question

实际上，我想根据第一个下拉列表中的值显示一个新的下拉列表。在这里，我可以显示select的下拉菜单，但如果我们选择其他选项，则无法隐藏其他下拉菜单。因此，如果我们选择“ buyer-contact-details”，则应显示lst1下拉列表。如果选择“供应商接触细节”，则应显示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>

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

Answer 2

这可能就是我要做的。我将一个类附加到子下拉菜单和子部分，并在主要下拉菜单更改后将它们向上滑动。

$(document).ready(function() {
  $(".deny-lst").on("change", function() {
    $(".subdrop").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();
    }
  });
})

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

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

2 个答案: