如果顶部选择的选定选项不可用，我需要重新加载选择字段

Question

基本上，当我在第二个字段中选择其他选项后，当我在第一个字段中选择不同的选项时，我希望第二个选择字段返回到默认（第一个）选项。

如果可能的话，没有阿贾克斯。

这是我的 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('')
})