Show/hide 下拉菜单基于另一个下拉菜单选择

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。这是一个例子

直播Demo

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

Show/hide 下拉菜单基于另一个下拉菜单选择

Show/hide dropdown based on another dropdown selection

html

javascript

jquery

drop-down-menu