下拉框选中选项后动态生成表格并填充值的技术实现问询

要实现下拉框选中后动态生成并显示表格的需求，核心要解决三个问题：默认隐藏表格容器、选中有效选项时动态构建完整表格结构、处理多下拉框的复用逻辑。以下是优化后的落地方案：

关键优化点 #

• 表格容器默认隐藏，仅在选中有效选项时显示
• 编写通用处理函数，避免重复冗余代码
• 处理空选项、禁用选项的边界情况，防止无效渲染
• 动态生成完整表格HTML（含表头+内容），而非仅填充已有结构

完整代码实现 #

HTML

<!-- 第一个下拉选择器 -->
<select id="namiddag" name="Namiddag" class="js-basic-single select-namiddag">
  <option value="">请选择</option>
  <option value="13x19 cm|1|12,50">13x19 cm, €12.50</option>
  <option value="20x30 cm|1|22,50">20x30 cm, €22.50</option>
  <option value="30x45 cm|1|32,50">30x45 cm, €32.50</option>
  <option class="disabled" value="disabled" disabled>需要更多数量或尺寸？请在购物车中备注。</option>
</select>

<!-- 表格容器：默认隐藏 -->
<div id="output-selected-option-afternoon" class="table-container" style="display: none;"></div>

<!-- 第二个下拉选择器 -->
<select id="onderweg" name="Onderweg" class="js-basic-single select-onderweg">
  <option value="">请选择</option>
  <option value="13x19 cm|1|12,50">13x19 cm, €12.50</option>
  <option value="20x30 cm|1|22,50">20x30 cm, €22.50</option>
  <option value="30x45 cm|1|32,50">30x45 cm, €32.50</option>
  <option class="disabled" value="disabled" disabled>需要更多数量或尺寸？请在购物车中备注。</option>
</select>

<!-- 第二个表格容器：默认隐藏 -->
<div id="output-selected-option-commute" class="table-container" style="display: none;"></div>

CSS

/* 表格基础样式 */
.table-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.table-container th, .table-container td {
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  text-align: left;
}

.table-container th {
  background-color: #f5f5f5;
  font-weight: 600;
}

.price-selected-option {
  font-weight: bold;
  color: #2d3748;
}

JavaScript

// 通用处理函数：适配所有下拉框
function handleSelectChange(element, targetContainerId) {
  const targetContainer = document.getElementById(targetContainerId);
  const selectedValue = element.value;

  // 空选项/禁用选项：隐藏表格
  if (!selectedValue || selectedValue === 'disabled') {
    targetContainer.style.display = 'none';
    return;
  }

  // 拆分选项值为格式、数量、价格
  const [format, amount, price] = selectedValue.split('|');

  // 动态生成完整表格HTML
  const tableHtml = `
    <table>
      <thead>
        <tr>
          <th>Format</th>
          <th>Amount</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>${format}</td>
          <td>${amount}</td>
          <td class="price-selected-option">${price}</td>
        </tr>
      </tbody>
    </table>
  `;

  // 填充内容并显示容器
  targetContainer.innerHTML = tableHtml;
  targetContainer.style.display = 'block';
}

// 绑定下拉框变更事件
document.getElementById('namiddag').addEventListener('change', function() {
  handleSelectChange(this, 'output-selected-option-afternoon');
});

document.getElementById('onderweg').addEventListener('change', function() {
  handleSelectChange(this, 'output-selected-option-commute');
});

逻辑说明 #

1. 默认隐藏：表格容器初始通过display: none隐藏，选中有效选项后切换为block显示
2. 通用复用：单个handleSelectChange函数适配所有下拉框，只需传入元素和目标容器ID，减少代码重复
3. 边界防护：判断空值和禁用选项，此时隐藏表格，避免无效内容渲染
4. 动态构建：直接生成完整的表格DOM结构，完全满足“选中后才构建表格”的需求

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