Question posted in
You can find the official documentation here.

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 – Jquery ajax

I am setting up a conditional dropdown.

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

Here is the dropdown for son, if it is NO then then the below 1st dropdown must come.

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

If it is Yes in the son dropdown then then the below 2nd dropdown must come.

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

2

Answers


  1. 0 
    $("#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");
  }
});

    When son select is change, This function be play

    Login or Signup to reply.
  2. 0

    as you mention jQuery in your tags, it is implemented by jQuery. Please use a dropdown
    library for convenient.

    Any way check snippet below:

    (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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search