如果儿子是，那么来自列表 1 的下拉列表应该出现如果儿子下拉列表不是，那么来自列表 2 的下拉列表必须出现答案

【问题标题】：If the son is yes then the dropdown from list 1 should come if the son dropdown is no then the drop down from list 2 must come如果儿子是，那么来自列表 1 的下拉列表应该出现如果儿子下拉列表不是，那么来自列表 2 的下拉列表必须出现
【发布时间】：2020-11-22 18:29:37
【问题描述】：

我正在设置一个条件下拉菜单。

<div class="form-group">
                <label asp-for="son" class="control-label"></label>
                <select name="son" id="son">
                    <option value="none" class="a" selected="selected"> -- choose one --</option>
                    <option>Yes</option>
                    <option>No</option>
                </select>
                <span asp-validation-for="son" class="text-danger"></span>
            </div>

这里是 儿子的下拉菜单，如果是 NO 那么下面的第一个下拉菜单必须出现。

 <div id="fatherNo" style="display: none" class="form-group">
                <label asp-for="NO" class="control-label"></label>
                <select name="NO">
                    <option value="none" class="a" selected="selected"> -- choose one --</option>
                    <option>Not_Applicable</option>
                </select>
                <span asp-validation-for="No" class="text-danger"></span>
            </div>

如果 儿子下拉列表中是 Yes，那么下面的 第二个下拉列表必须出现。

<div id="fatheryes" style="display: none" class="form-group">
                <label asp-for="fatheryes" class="control-label"></label>
                <select name="fatheryes">
                    <option value="none" class="a" selected="selected"> -- choose one --</option>
                    <option>working</option>
                </select>
                <span asp-validation-for="fatheryes" class="text-danger"></span>
            </div>

【问题讨论】：

这是duplicate of your previous question。

标签： php html jquery ajax model-view-controller

【解决方案1】：

正如您在标签中提到的 jQuery，它是由 jQuery 实现的。请使用下拉菜单图书馆方便。

任何方式检查下面的sn-p：

(function ($){
  'use strict';

  $(function() {
    var
      namespace = 'customNamespace',
      //-----
      son = $('select[name="son"]'),
      ddYes = $('#fatherNo'),
      ddNo = $('#fatherYes');
    
    var selected;
    son.on('change.' + namespace, function () {
      selected = $(this).find(':selected');
      if(selected.val().toLowerCase() == 'yes') {
        ddYes.show();
        ddNo.hide();
      } else if(selected.val().toLowerCase() == 'no') {
        ddYes.hide();
        ddNo.show();
      } else {
        ddYes.hide();
        ddNo.hide();
      }
    });
  });
})(jQuery);

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

<div class="form-group">
    <label asp-for="son" class="control-label"></label>
    <select name="son" id="son">
        <option value="none" class="a" selected="selected"> -- choose one --</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
    <span asp-validation-for="son" class="text-danger"></span>
</div>

<div id="fatherNo" style="display: none" class="form-group">
    <label asp-for="NO" class="control-label"></label>
    <select name="NO">
        <option value="none" class="a" selected="selected"> -- choose one --</option>
        <option>Not_Applicable</option>
    </select>
    <span asp-validation-for="No" class="text-danger"></span>
</div>

<div id="fatherYes" style="display: none" class="form-group">
    <label asp-for="fatheryes" class="control-label"></label>
    <select name="fatheryes">
        <option value="none" class="a" selected="selected"> -- choose one --</option>
        <option>working</option>
    </select>
    <span asp-validation-for="fatheryes" class="text-danger"></span>
</div>

【讨论】：

【解决方案2】：

$("#son").change(function(){
 var selected=$(this).children("option:selected").text();
  if(selected.includes("Yes")){
     $("fatheryes").css("display","block");
     $("fatherNo").css("display","none");
  }
  else{
     $("fatheryes").css("display","none");
     $("fatherNo").css("display","block");
  }
});

当子选择发生变化时，该功能会发挥作用

【讨论】：