Vue中切换父级选择框时如何重置子级选择框？

问题场景 #

我有三个下拉选择框：父级选择框combo-a，两个子级选择框combo-b、combo-c。combo-a包含A、B两个选项，每个选项对应combo-b和combo-c各自的可选值。

问题：当选择A后切换到B，再切回A时，combo-b和combo-c仍保留之前选中的选项，需要在切换combo-a时重置这两个子选择框。补充：flushCallbacks总是在最后生效。

已尝试的方法（部分无效） #

$(next_combo).val("") ; // 无效果
$(next_combo).empty(); // 报错
$(next_combo).hide(); // 子框消失（不符合需求）
$(next_combo).find(':selected').data('value').val(''); // 报错
$(next_combo).prop('selectedIndex', 0) // 无效
$(next_combo).val("_"); // 无效
$(next_combo).attr('value',''); // 无效
$(next_combo).val( $(next_combo).prop('defaultSelected') ); // 有效但存在回调问题

可行解决方案 #

方案1：重置+手动触发变更（适配回调顺序） #

针对flushCallbacks最后生效的问题，先重置选中状态，再手动触发change事件，确保后续回调能正确识别重置后的状态：

// 绑定父选择框的变更事件
$('#combo-a').on('change', function() {
  const selectedParent = $(this).val();
  // 批量重置子选择框
  $('#combo-b, #combo-c').each(function() {
    // 优先重置为默认选中项，无默认项则清空
    const defaultOpt = $(this).find('option[selected]');
    $(this).val(defaultOpt.length ? defaultOpt.val() : '');
    // 手动触发change，确保依赖子框状态的回调执行
    $(this).trigger('change');
  });

  // 这里执行子选项加载逻辑，比如根据selectedParent加载对应选项
  // loadChildOptions(selectedParent);
});

方案2：加载子选项时强制设置默认选中 #

在动态渲染子选项的逻辑中，直接将默认选项标记为selected，覆盖之前的选中状态：

function loadChildOptions(parentVal) {
  // 处理combo-b的选项渲染
  if (parentVal === 'A') {
    $('#combo-b').html(`
      <option value="" selected>请选择</option>
      <option value="A1">A专属选项1</option>
      <option value="A2">A专属选项2</option>
    `);
  } else if (parentVal === 'B') {
    $('#combo-b').html(`
      <option value="" selected>请选择</option>
      <option value="B1">B专属选项1</option>
      <option value="B2">B专属选项2</option>
    `);
  }
  // combo-c的逻辑同理
}

方案3：延迟重置避开回调覆盖 #

如果重置操作被flushCallbacks中的后续逻辑覆盖，用setTimeout将重置放在事件循环的下一轮执行，确保在所有回调之后生效：

$('#combo-a').on('change', function() {
  const selectedParent = $(this).val();
  // 先加载子选项
  loadChildOptions(selectedParent);
  // 延迟重置，避开flushCallbacks的影响
  setTimeout(() => {
    $('#combo-b, #combo-c').val('');
  }, 0);
});

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