Search code examples
javascriptjquerydrop-down-menudropdown

Reset and clear from first dropdown with jQuery

My apologize, Is there a way to reset and clear all dropdown to the original state, when a user select the first dropdown. Hope I explain myself clearly. Thank you in advance.

enter image description here

enter image description here

HTML

 <div class="form-group row">
                    <div class="col-sm-6">
                        <div id="#divAreYouGoingOnVacation">
                            <label asp-for="AreYouGoingOnVacation">Are You Going On Vacation</label>
                            <select asp-for="AreYouGoingOnVacation" class="form-control" id="AreYouGoingOnVacation"
                                required>
                                <option value="" selected>-- Please choose an option --</option>
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div id="divWouldYouBeTakingASpouse">
                            <label asp-for="WouldYouBeTakingASpouse">Would You Be Taking A Spouse?</label>
                            <select asp-for="WouldYouBeTakingASpouse" class="form-control"
                                id="WouldYouBeTakingASpouse" required>
                                <option value="" selected>-- Please choose an option --</option>
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                            <br /><br />
                        </div>
                    </div>

jQuery

  $("#AreYouGoingOnVacation").change(function () {
    if ($(this).val() == "Yes") {
      $("#divWouldYouBeTakingASpouse").show();
    } else {
      $("#divWouldYouBeTakingASpouse").hide();
    }
  });
  $("#WouldYouBeTakingASpouse").change(function () {
    if ($(this).val() == "Yes") {
      $("#divHowLongAreYouWillingToWaitForFood").show();
    } else {
      $("#divHowLongAreYouWillingToWaitForFood").hide();
    }
  });
});
Solution

  • if I understand you correct you would reset the value for the second dropdown if the first dropdown changed.

    it would be like this

    $('#AreYouGoingOnVacation').on('change', function(){
   $('#WouldYouBeTakingASpouse').val('');
})