如何使用jQuery实现基于答案选择的无重复问题序列生成？

问题说明 #

我有一个问答库，需要实现以下功能：

• 从下拉菜单选择问题后显示对应答案
• 每个答案旁的子下拉菜单可选择下一个问题，生成Q1-A1-Q3-A4形式的问题-答案序列
• 单个序列内问题不可重复，不同序列间允许重复
  目前已完成基础的选择填充功能，但无法设置序列结束的判断条件。

实现思路 #

要解决序列结束的问题，核心是跟踪当前序列内已选择的问题，动态过滤下拉选项，当无可选问题时触发结束逻辑。

具体实现步骤及代码示例 #

1. 维护已选问题集合 #

为每个序列单独维护一个数组，存储已选中的问题ID，确保单个序列内无重复。

2. 动态过滤下拉选项 #

每次渲染子下拉菜单时，从问答库中排除已选问题，只展示未被选择过的选项。

3. 判断序列结束并处理 #

当过滤后无可用问题时，执行结束逻辑（如显示完成提示、隐藏下拉菜单）。

以下是关键代码修改示例：

// 假设问答库数据结构
const qaLibrary = [
  { id: 'q1', question: '问题1', answer: '答案1' },
  { id: 'q2', question: '问题2', answer: '答案2' },
  { id: 'q3', question: '问题3', answer: '答案3' },
  // 可扩展更多问答项
];

// 跟踪当前序列的已选问题ID
let currentSequenceSelected = [];

// 渲染下拉菜单的核心函数
function renderNextDropdown(parentElement) {
  // 过滤出当前序列未选的问题
  const availableQues = qaLibrary.filter(qa => !currentSequenceSelected.includes(qa.id));

  if (availableQues.length === 0) {
    // 序列结束：显示提示，不再生成下拉
    const endTip = document.createElement('p');
    endTip.textContent = '此序列已用完所有可选择的问题';
    parentElement.appendChild(endTip);
    return;
  }

  // 创建下拉菜单
  const select = document.createElement('select');
  availableQues.forEach(qa => {
    const option = document.createElement('option');
    option.value = qa.id;
    option.textContent = qa.question;
    select.appendChild(option);
  });

  // 绑定选择事件
  select.addEventListener('change', function(e) {
    const selectedId = e.target.value;
    const selectedQA = qaLibrary.find(qa => qa.id === selectedId);

    // 记录已选问题
    currentSequenceSelected.push(selectedId);

    // 显示当前问题的答案
    const answerEl = document.createElement('div');
    answerEl.innerHTML = `<strong>${selectedQA.question}</strong>：${selectedQA.answer}`;
    parentElement.appendChild(answerEl);

    // 渲染下一个下拉菜单
    const nextDropdownWrap = document.createElement('div');
    parentElement.appendChild(nextDropdownWrap);
    renderNextDropdown(nextDropdownWrap);
  });

  parentElement.appendChild(select);
}

// 初始化第一个下拉菜单
renderNextDropdown(document.getElementById('sequence-root'));

关键逻辑说明 #

• currentSequenceSelected数组实时记录当前序列已选的问题ID，避免重复选择
• renderNextDropdown函数每次渲染时都会过滤已选问题，确保下拉选项都是未选过的
• 当availableQues.length === 0时，说明序列已无可用问题，直接显示结束提示

如果需要支持多序列并行，只需为每个序列单独维护currentSequenceSelected数组即可。

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