如何重置带onchange事件的select下拉框至默认状态

要实现用户选择完成后，恢复select下拉框的选中状态及相关数据到初始默认状态，你可以按以下步骤操作：

1. 提前保存初始状态 #

页面加载完成后，先记录select的默认选中值和对应按钮的初始data-qte值，确保恢复时有准确的基准：

$(document).ready(function() {
  // 把初始状态存在全局变量里，方便后续调用
  window.initialState = {
    selectValue: $('.form-select.styleselect').val(),
    btnDataQte: $('[data-nom="2001"]').attr('data-qte')
  };
});

2. 修改onchange事件函数，添加恢复逻辑 #

在changeQte函数执行完原有数据修改后，加入恢复代码。你可以根据需求选择延迟恢复（给用户留时间看到修改效果）或立即恢复：

方式一：延迟恢复（推荐） #

function changeQte(element) {
  var qte = element.value;
  var t = $(element);
  var label = t.attr("aria-label");
  var targetBtn = $("[data-nom='" + label + "']");
  
  // 执行原有数据修改逻辑
  targetBtn.attr("data-qte", qte);
  console.log(targetBtn.attr("data-qte"));

  // 延迟1秒恢复（时间可自行调整）
  setTimeout(function() {
    // 恢复select的选中状态到初始值
    $(element).val(window.initialState.selectValue);
    // 恢复按钮的data-qte值
    targetBtn.attr("data-qte", window.initialState.btnDataQte);
    console.log("已恢复至初始状态");
  }, 1000);
}

方式二：立即恢复 #

如果不需要延迟，直接在修改后执行恢复：

function changeQte(element) {
  var qte = element.value;
  var t = $(element);
  var label = t.attr("aria-label");
  var targetBtn = $("[data-nom='" + label + "']");
  
  // 执行原有数据修改逻辑
  targetBtn.attr("data-qte", qte);
  console.log(targetBtn.attr("data-qte"));

  // 立即恢复初始状态
  $(element).val(window.initialState.selectValue);
  targetBtn.attr("data-qte", window.initialState.btnDataQte);
  console.log("已恢复至初始状态");
}

3. 可选：添加手动恢复按钮 #

如果希望用户能主动触发恢复操作，可在HTML中新增按钮并绑定恢复事件：

补充HTML代码 #

<select class="form-select styleselect" aria-label="2001" onchange="changeQte(this);">
  <option selected value="1">1 sachet</option>
  <option value="2">2 sachets</option>
  <option value="3">3 sachets</option>
  <option value="4">4 sachets</option>
</select>
<a style="cursor: pointer; margin-bottom: 5px; width: 90%" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" class="btn btn-primary ajouter-panier">
    ajouter au panier
</a>
<!-- 新增恢复按钮 -->
<button class="btn btn-secondary" style="margin-top:5px;" onclick="resetToInitial()">恢复初始状态</button>

对应的恢复函数 #

function resetToInitial() {
  var selectEl = $('.form-select.styleselect');
  var targetBtn = $('[data-nom="2001"]');
  
  selectEl.val(window.initialState.selectValue);
  targetBtn.attr("data-qte", window.initialState.btnDataQte);
  console.log("已恢复至初始状态");
}

内容的提问来源于stack exchange，提问作者ariane