Мне нужно перезагрузить поле выбора, если выбранная опция недоступна с верхним выбором

Question

Как правило, я хочу, чтобы второе поле выбора возвращалось к стандартному (первому) параметру, когда я выбираю другой параметр в первом поле после выбора параметра во втором.

Если возможно без Ajax.

Вот мой HTML:

<form id="formCalcul" class="col-sm-12 col-md-6 mx-auto">
        <div class="form-group ft-20">
            <label for="type">Type de condo</label>
            <select data-cell="A1" class="form-control custom-select-lg ft-20 mb-3" id="type">
                <option selected>Choose a first option</option>
                <option id="min" value="180000">Le minimaliste</option>
                <option id="fam" value="220000">Le familiale</option>
                <option id="mod" value="400000">Le moderne</option>
            </select>
        </div>

        <div class="form-group">
            <label for="secteur">Secteur</label>
            <select data-cell="A2" class="form-control custom-select-lg ft-20 mb-3" id="secteur">
                <option selected>Choose a second option</option>
                <option id="cha" value="25000">Charlesbourg</option>
                <option id="anc" value="0">Ancienne-Lorette</option>
                <option id="hau" value="80000">Haute-Ville</option>
                <option id="bea" value="0">Beauport</option>
                <option id="lim" value="50000">Limoilou</option>
            </select>
        </div>

        <div class="form-group ft-30">
            <label class="col-12">Total</label>
            <div class="col-12">
                <label data-cell="B1" data-format="$ 0,0.00" data-formula="SUM(A1:A12)">$ 0.00</label>
            </div>
        </div>
    </form>    

А это мой JQuery:

  $("#type").change(function(){
   var id = $(this).children(":selected").attr("id");
   if (id == "min") {
    $('#cha3').attr('disabled', true);
    $('#hau, #bea').addClass('d-none');
    $('#cha ,#anc, #lim').removeClass('d-none');
   }

   if (id == "fam") {
    $('#cha3').attr('disabled', false);
    $('#lim, #bea').addClass('d-none');
    $('#hau').removeClass('d-none')
   }

   if (id == "mod") {
    $('#cha3').attr('disabled', false);
    $('#anc, #cha').addClass('d-none');
    $('#hau ,#bea, #lim').removeClass('d-none');
   }
  });    

Answer 1

Вы можете использовать $('#secteur option:eq(0)').prop('selected' , true);

$("#type").change(function(){
   var id = $(this).children(":selected").attr("id");
   if (id == "min") {
    $('#cha3').attr('disabled', true);
    $('#hau, #bea').addClass('d-none');
    $('#cha ,#anc, #lim').removeClass('d-none');
   }

   if (id == "fam") {
    $('#cha3').attr('disabled', false);
    $('#lim, #bea').addClass('d-none');
    $('#hau').removeClass('d-none')
   }

   if (id == "mod") {
    $('#cha3').attr('disabled', false);
    $('#anc, #cha').addClass('d-none');
    $('#hau ,#bea, #lim').removeClass('d-none');
   }
   $('#secteur option:eq(0)').prop('selected' , true);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formCalcul" class="col-sm-12 col-md-6 mx-auto">
        <div class="form-group ft-20">
            <label for="type">Type de condo</label>
            <select data-cell="A1" class="form-control custom-select-lg ft-20 mb-3" id="type">
                <option selected>Choose a first option</option>
                <option id="min" value="180000">Le minimaliste</option>
                <option id="fam" value="220000">Le familiale</option>
                <option id="mod" value="400000">Le moderne</option>
            </select>
        </div>

        <div class="form-group">
            <label for="secteur">Secteur</label>
            <select data-cell="A2" class="form-control custom-select-lg ft-20 mb-3" id="secteur">
                <option selected>Choose a second option</option>
                <option id="cha" value="25000">Charlesbourg</option>
                <option id="anc" value="0">Ancienne-Lorette</option>
                <option id="hau" value="80000">Haute-Ville</option>
                <option id="bea" value="0">Beauport</option>
                <option id="lim" value="50000">Limoilou</option>
            </select>
        </div>

        <div class="form-group ft-30">
            <label class="col-12">Total</label>
            <div class="col-12">
                <label data-cell="B1" data-format="$ 0,0.00" data-formula="SUM(A1:A12)">$ 0.00</label>
            </div>
        </div>
    </form>

Answer 2

если вы зададите значение по умолчанию для опций = "", вы можете использовать следующее.

$('#type').on('change', function() {
    $('#secteur').val('')
})