jQuery функция замены на один выбор, ajax заполнение вторичного выбора. Как вернуться к значению по умолчанию?

Question

У меня есть два выбранных элемента. Один для производителя и один для модели. Элемент выбора производителя обновит элемент выбора модели при изменении с помощью ajax. Имеющаяся у меня функция работает хорошо, но я бы хотел добавить функциональность, чтобы изменить элемент выбора модели обратно на его значение по умолчанию (Выбрать модель ...) и отключить выбор модели, если основной элемент выбора производителя установлен обратно на его исходное значение по умолчанию (Выберите производителя ...).

Выбор производителя (основной)

<select name="inputManufacturer" id="inputManufacturer" class="form-control">
    <option selected>Select manufacturer...</option>
    <option value="1">Apple</option>
</select>

Выбор модели (дополнительный, обновления через ajax)

<select name="inputModel" id="inputModel" class="form-control" disabled>
    <option>Select model...</option>
</select>

jQuery функция

$(document).ready(function ()
{
        $('select[name="inputManufacturer"]').on('change',function(){
           $('select[name="inputModel"]').prop('disabled', false);
           var man_ID = $(this).val();
           if(man_ID)
           {
              $.ajax({
                 url : 'add/' +man_ID,
                 type : "GET",
                 dataType : "json",
                 success:function(data)
                 {
                    console.log(data);
                    $('select[name="inputModel"]').empty();
                    $.each(data, function(key,value){
                       $('select[name="inputModel"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
                 }
              });
           }
           else
           {
              $('select[name="inputModel"]').empty();
           }
        });
});

Answer 1

Дайте значение параметров по умолчанию = "0"

Тогда вы можете использовать $('select[name="inputModel"]').html('<option value="0">Select model...</option>'); вместо пустого. И отключи его после этого.

$(document).ready(function ()
{
    $('select[name="inputManufacturer"]').on('change',function(){
       $('select[name="inputModel"]').prop('disabled', false);
       var man_ID = $(this).val();
       if(man_ID > 0)
       {
        $('select[name="inputModel"]').append('<option value="1">Option1</option>');
        $('select[name="inputModel"]').append('<option value="2">Option2</option>');
       }
       else
       {
          $('select[name="inputModel"]').html('<option value="0">Select model...</option>');
          $('select[name="inputModel"]').prop('disabled', true);
       }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="inputManufacturer" id="inputManufacturer" class="form-control">
    <option value="0" selected>Select manufacturer...</option>
    <option value="1">Apple</option>
</select>
<select name="inputModel" id="inputModel" class="form-control" disabled>
    <option value="0">Select model...</option>
</select>