How to reset to bring down the list by default when there is nothing in the text box?

Question

I have a #Email text box and I have two menus with the lists down, which are #Carriers and #Phones. When email is entered, I want to include only the Carriers field, but not the Phones field. When media is selected, the Phones drop-down list should be enabled. The Phones drop-down list can only be enabled if email and media are selected. If the user enters an email address and selects an item from # media and # phones, and then the email is deleted, two drag and drop menus must be disabled. The way I want it to work is when the user selects items from # media and # phones, and then removes the email address, and the drop-down menus should be disabled and set by default. Now it’s disconnecting,but does not return them by default.

      <!-- Will check for e-mail and enable #carrires dropdownlist, otherwise, it will disable dropdownlist for #Carriers-->
    <script>
$(document).ready(function () {
    $('#Email').on('input change', function () { //check to see if email is empty
        if ($(this).val() == '') {
            $('#Carriers').prop('disabled', true);//disable carriers when there is no email
            $('#Phones').prop('disabled', true); //will keep Phones disabled when there is no email
        }
        else {
            $('#Carriers').prop('disabled', false);
        }
    });
});

    <!-- Will check for Carriers selected and enable the Phones dropdown list-->
<script>
$(document).ready(function () { //check if carriers is selected
    $('#Carriers').change(function () {
        if ($('#Carriers').val() == '') { //if empty
            $('#Phones').prop('disabled', true); //disable
        }
        else {
            $('#Phones').prop('disabled', false); //enable
        }
    });
});

     <!--this row carrier and phones-->
            <div class="form-group">
                <div class="col-lg-1 col-lg-offset-1 col-md-1 col-sm-1">
                    @Html.LabelFor(model => model.Carriers)
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    @Html.DropDownListFor(model => model.Carriers, new SelectList(ViewBag.Carriers, "ID", "Carrier1"), "Select a Carrier", new
           {
               @disabled = "disabled",
               data_bind = "value: Request.Carriers",
               @class = "form-control",
               data_width = "95%",
               data_toggle = "tooltip",
               data_placement = "top",
               title = "Requested Plan Carrier"
           })
                    @Html.ValidationMessageFor(model => model.Carriers, "", new { @class = "text-danger" })
                </div>
                <div class="col-lg-1">
                    @Html.LabelFor(model => model.Phones)
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3">
                    @Html.DropDownListFor(model => model.Phones, new SelectList(ViewBag.Phones as System.Collections.IEnumerable, "PhoneID", "Name"), "Select a Phone", new
               {
                   @disabled = "disabled",
                   data_bind = "value: Request.Phones",
                   @class = "form-control",
                   data_width = "95%",
                   data_toggle = "tooltip",
                   data_placement = "top",
                   title = "Requested Equipment"
               })
                    @Html.ValidationMessageFor(model => model.Phones, "", new { @class = "text-danger" })
                </div>

Answer 1

-, , , , , reset .

, , , .

$(document).ready(function () {
    $('#Email').on('input', function () { //check to see if email is empty
      if ($(this).val() == '') {
        $('#Carrier, #Phones')
          .prop('disabled', true).each(function () {
            $(this).val($(this).find("option:first").val());
          });
      } else {
        $('#Carrier')
        .prop('disabled', false);
      }
    });
    $("#Carrier").on('input', function () {
      $("#Phones").prop('disabled',false);
    });
	$("#Email").trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<select  id="Carrier">
	<option value="default">Please select a carrier</option>
	<option value="1">AT&amp;T</option>
	<option value="2">Verizon</option>
	<option value="3">Cricket</option>
	<option value="4">Ting</option>
	<option value="5">Sprint</option>
</select>

<select  id="Phones">
	<option value="default">Please select a device</option>
	<option value="1">Android</option>
	<option value="2">iPhone</option>
	<option value="3">Blackberry</option>
</select>

<input type="text" id="Email" />

Hide result

Answer 2

   <!-- Will check for e-mail and enable #carrires dropdownlist, otherwise, it will disable dropdownlist for #Carriers-->
   <script>
  $(document).ready(function () {
    $('#Email').on('input change', function () { //check textbox on input change
        if ($(this).val() == '') {//check to see if email is empty
            $('#Carriers, #Phones').prop('disabled', true).each(function () { //disable #carriers and #Phones dropdown list when no email is entered
                $(this).val($(this).find("option:first").val()); //"option:first" will set the dropdown list back to default when no email is entered
            });
        }
        else {
            $('#Carriers').prop('disabled', false); //else if there is email it will enable the dropdownlist for carriers
        }
    });
});

    <!-- Will check for Carriers selected and enable the Phones dropdown list-->
    <script>
$(document).ready(function () {
    $('#Carriers').change(function () {//dropdown list for a change
        if ($('#Carriers').val() == '') {//if no carrriers is select
            $('#Phones').prop('disabled', true).each(function () {;//disable dropdownlist for #Phones
                $(this).val($(this).find("option:first").val());
            });
        }
        else {
            $('#Phones').prop('disabled', false); //else enable Phones once Carriers is selected
        }
    });
});