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

如果将默认选项的值设置为=“”，则可以使用以下内容。

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

Answer 2

您可以使用AccessibilityNodeInfo

$('#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);
  });

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

2 个答案: