选中多选框对应ID选项时，如何展示关联该ID的数据表格？

没问题，我来帮你实现这个需求！要让多选下拉框选中选项时展示对应ID的关联表格，咱们可以分步骤调整代码，确保在各种多选场景下都能正常工作：

首先，咱们把原来绑定在<option>上的onclick事件移到<select>标签上（多选场景下，用户可能用键盘批量选择，select的change事件比单个option的onclick更可靠），同时给默认隐藏的表格加一个容器，方便控制显示/隐藏：

<div class="form-group">
  <select name="electoralUnit" multiple class="form-control" size="40" id="electoralUnitSelect">
    {{#each electoralUnits}}
      <option value="{{id}}">{{name}}</option>
    {{/each}}
  </select>
</div>

<!-- 默认隐藏的关联表格容器 -->
<div id="dataTableContainer" style="display: none; margin-top: 20px;">
  <table class="table table-bordered" id="associatedTable">
    <thead>
      <tr>
        <th>关联字段1</th>
        <th>关联字段2</th>
        <!-- 根据你的实际数据调整表头 -->
      </tr>
    </thead>
    <tbody id="tableBody">
      <!-- 动态渲染的数据会放在这里 -->
    </tbody>
  </table>
</div>

如果需要更灵活的显示控制，可以定义一个CSS类来管理隐藏状态：

.hidden {
  display: none !important;
}

接下来编写JS代码，监听下拉框的选中变化，根据选中的ID渲染对应的数据表格。这里假设你已经从MongoDB拿到了每个选项对应的关联数据（可以在获取electoralUnits时一起把关联数据带回前端）：

// 获取页面元素
const selectBox = document.getElementById('electoralUnitSelect');
const tableContainer = document.getElementById('dataTableContainer');
const tableBody = document.getElementById('tableBody');

// 模拟从MongoDB获取的关联数据（key是electoralUnit的id，value是表格行数据）
const unitAssociatedData = {
  "unit_001": [
    { field1: "A区数据1", field2: "详情A1" },
    { field1: "A区数据2", field2: "详情A2" }
  ],
  "unit_002": [
    { field1: "B区数据1", field2: "详情B1" }
  ]
  // 更多数据...
};

// 监听下拉框选中变化
selectBox.addEventListener('change', function() {
  // 获取所有选中的选项ID
  const selectedIds = Array.from(this.selectedOptions).map(opt => opt.value);

  if (selectedIds.length === 0) {
    // 没有选中任何选项时，隐藏表格并清空内容
    tableContainer.classList.add('hidden');
    tableBody.innerHTML = '';
    return;
  }

  // 显示表格容器
  tableContainer.classList.remove('hidden');
  // 清空表格旧内容
  tableBody.innerHTML = '';

  // 遍历选中的ID，渲染对应表格行
  selectedIds.forEach(id => {
    const rows = unitAssociatedData[id];
    if (rows) {
      rows.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${row.field1}</td>
          <td>${row.field2}</td>
        `;
        tableBody.appendChild(tr);
      });
    }
  });
});

场景1：需要异步获取关联数据 #

如果关联数据不能提前拿到，需要选中选项后再调用接口获取，可以把渲染逻辑改成异步请求：

selectedIds.forEach(id => {
  // 替换成你的后端API地址
  fetch(`/api/electoral-units/${id}/related-data`)
    .then(res => res.json())
    .then(data => {
      if (data.rows) {
        data.rows.forEach(row => {
          const tr = document.createElement('tr');
          tr.innerHTML = `<td>${row.field1}</td><td>${row.field2}</td>`;
          tableBody.appendChild(tr);
        });
      }
    })
    .catch(err => console.error('获取数据失败:', err));
});

场景2：每个选中项单独展示表格 #

如果需要给每个选中的选项生成独立的表格，可以修改渲染逻辑：

tableContainer.innerHTML = ''; // 清空容器
selectedIds.forEach(id => {
  const rows = unitAssociatedData[id];
  if (rows) {
    // 创建单独的表格
    const table = document.createElement('table');
    table.className = 'table table-bordered mb-3';
    table.innerHTML = `
      <thead>
        <tr><th colspan="2">${electoralUnits.find(u => u.id === id)?.name || '未知单位'}</th></tr>
        <tr><th>字段1</th><th>字段2</th></tr>
      </thead>
      <tbody>
        ${rows.map(r => `<tr><td>${r.field1}</td><td>${r.field2}</td></tr>`).join('')}
      </tbody>
    `;
    tableContainer.appendChild(table);
  }
});

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