Если сын - да, то должен появиться раскрывающийся список из списка 1, если раскрывающийся список сына - нет, тогда должен появиться раскрывающийся список из списка 2

Question

Я настраиваю условное раскрывающееся меню.

<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 , то ниже 1-й раскрывающийся список должен появиться .

 <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>

Если это Да в раскрывающемся списке сын , тогда должен появиться следующий 2-й раскрывающийся список .

<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>

Answer 1

как вы упоминаете jQuery в своих тегах, это реализуется jQuery. Для удобства используйте раскрывающуюся библиотеку.

В любом случае проверьте фрагмент ниже:

(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>

Answer 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");
  }
});

При изменении выбора сына эта функция будет воспроизводиться