根據另一個下拉選項顯示/隱藏下拉列表

Question

當用戶為 Menu1 選擇“是”時，我試圖讓 Menu2 出現。 當為 Menu3 選擇“是”時，應該出現 Menu4，等等。我錯過了什么或做錯了什么？ 先感謝您！

 $(function() { $("#Menu2").hide(); $("#Menu3").hide(); $("#Menu4").hide(); $("#Menu5").hide(); $("#Menu6").hide(); $("#Menu1").change(function() { if ($(this).val() == "Yes") { $("#Menu2").show(); } else { $("#Menu2").hide(); } }); $("#Menu2").change(function() { if ($(this).val() == "Yes") { $("#Menu3").show(); } else { $("#Menu3").hide(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-row"> <div class="form-group col-md-4"> <label for="Menu1">Menu1</label> <select class="form-control" name="name" id="Menu1"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> <div class="form-group col-md-4" id="Menu2"> <label for="Menu2">Menu2</label> <select class="form-control" name="pets" id="Menu2"> <option value="">--Please choose an option--</option> <option value="dog">Yes</option> <option value="cat">No</option> </select> </div> <div class="form-group col-md-4" id="Menu2"> <label for="Menu2">Menu2</label> <select class="form-control" name="pets" id="Menu2"> <option value="">--Please choose an option--</option> <option value="dog">Yes</option> <option value="cat">No</option> </select> </div>

Answer 1

問題出在命名和 jQuery 的結構中

 $(document).ready(function(){ $("#menu2").hide(); $("#menu3").hide(); }); $(document).on('change',"#select1", function () { if ($(this).val() == "Yes") { $("#menu2").show(); } else { $("#menu2").hide(); } }); $(document).on('change',"#select2", function () { if ($(this).val() == "Yes") { $("#menu3").show(); } else { $("#menu3").hide(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group col-md-4"> <label for="Menu1">Menu1</label> <select class="form-control" name="name1" id="select1"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> <div class="form-group col-md-4" id="menu2"> <label for="Menu2">Menu2</label> <select class="form-control" name="name2" id="select2"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> <div class="form-group col-md-4" id="menu3"> <label for="Menu2">Menu3</label> <select class="form-control" name="name3" id="select3"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> </div>

Answer 2

你的 html 和 javascript 都是錯誤的。 您不能為多個控件提供相同的 ID。 這是一個例子

現場演示

<div class="form-row">
  <div class="form-group col-md-4">
    <label for="Menu1">Menu1</label>
    <select class="form-control" name="name" id="Menu1">
      <option value="">--Please choose an option--</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <div class="form-group col-md-4" id="divMenu2">
    <label for="Menu2">Menu2</label>
    <select class="form-control" name="pets" id="Menu2">
      <option value="">--Please choose an option--</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <div class="form-group col-md-4" id="divMenu3">
    <label for="Menu2">Menu3</label>
    <select class="form-control" name="pets" id="Menu2">
      <option value="">--Please choose an option--</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(function() {
  $("#divMenu2").hide();
  $("#divMenu3").hide();

  $("#Menu1").change(function() {
    if ($(this).val() == "Yes") {
      $("#divMenu2").show();
    } else {
      $("#divMenu2").hide();
    }
  });
  $("#Menu2").change(function() {
    if ($(this).val() == "Yes") {
      $("#divMenu3").show();
    } else {
      $("#divMenu3").hide();
    }
  });
});