如何实现过滤依赖值时不被删除的级联列表？父级联LOV不支持该方案

可以实现这种级联列表，核心是绕过原生Parent cascading LOV的限制，通过自定义逻辑来控制已选值的保留，具体方案如下：

• 暂存已选子选项状态：在父选项触发过滤时，先把当前选中的子选项值单独保存，不直接清空选中状态。
• 动态更新子列表：根据父选项的过滤结果更新可选范围，但把已选中、不在新可选范围内的值保留在列表中（可以设置为灰禁用状态，提示用户该选项已不符合当前父级条件）。
• 适配提交逻辑：确保表单提交时，这类已选但不符合当前过滤条件的值能正常被提交，或者根据业务需求提示用户调整选择。

以下是前端实现的伪代码示例：

// 暂存已选中的子选项值
let selectedChildVals = [];

// 父选项变化时触发过滤
function handleParentChange(newParentVal) {
  // 获取父选项对应的过滤后子列表
  const filteredChildOpts = getFilteredChildList(newParentVal);
  // 更新子选择框，保留已选值
  refreshChildSelect(filteredChildOpts, selectedChildVals);
}

// 更新子选择框DOM
function refreshChildSelect(options, selectedVals) {
  const childSelect = document.getElementById('child-select');
  childSelect.innerHTML = '';

  // 先添加已选但不在过滤列表中的选项（灰显禁用）
  selectedVals.forEach(val => {
    if (!options.some(opt => opt.value === val)) {
      const opt = document.createElement('option');
      opt.value = val;
      opt.textContent = getOptionLabel(val);
      opt.disabled = true;
      opt.selected = true;
      childSelect.appendChild(opt);
    }
  });

  // 添加过滤后的可选选项
  options.forEach(opt => {
    const newOpt = document.createElement('option');
    newOpt.value = opt.value;
    newOpt.textContent = opt.label;
    newOpt.selected = selectedVals.includes(opt.value);
    childSelect.appendChild(newOpt);
  });
}

// 监听子选项选择，更新暂存值
document.getElementById('child-select').addEventListener('change', function(e) {
  selectedChildVals = Array.from(this.selectedOptions).map(opt => opt.value);
});

这种自定义方式能完全控制级联过程中已选值的处理逻辑，适配不同业务场景。

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