如何使用 Ajax 动态填充多个 HTML 标签页中的下拉选项_技术教程

本文详解如何为 bootstrap 多标签页（tabs）中重复结构的表单，通过 ajax 正确加载对应网络运营商（如 mtn、glo 等）的动态数据选项，解决因 dom id 重复导致仅首标签生效的问题。

在使用 Bootstrap 标签页（Tab）构建多网络运营商数据购买界面时，一个常见陷阱是：所有 Tab 内都包含相同 id 的表单元素（如 id="data_type" 和 id="plan_id"）。由于 HTML 规范要求 id 全局唯一，document.getElementById() 仅返回第一个匹配元素，因此原始 JavaScript 代码始终只操作第一个 Tab（MTN）中的下拉框，其余 Tab 完全失效。

✅ 正确方案：基于类名 + 数据属性 + 相对定位

不再依赖重复的 id，而是改用语义化类名（如 .data-type-select、.plan-id-select）配合 data-* 属性标识所属网络，并通过 DOM 遍历与相对查找实现精准控制。

✅ HTML 结构优化（关键修改）

为每个 Tab 中的

⚠️ 注意：原代码中每个 Tab 都有，该方式不仅冗余，且 id 冲突。现直接通过 data-network 属性声明网络类型，更简洁可靠。

✅ JavaScript 逻辑重构（支持全部 Tab）

使用 querySelectorAll 批量绑定事件，并利用 this.parentElement 或 closest() 定位当前 Tab 内关联的 plan_id 下拉框：

document.addEventListener('DOMContentLoaded', () => {
  const dataTypeSelects = document.querySelectorAll('.data-type-select');

  dataTypeSelects.forEach(select => {
    select.addEventListener('change', function () {
      const selectedType = this.value;
      const networkProvider = this.dataset.network; // 如 "MTN", "GLO"
      // 向上查找最近的 form，再查找同级的 .plan-id-select
      const planIdSelect = this.closest('form')?.querySelector('.plan-id-select');

      if (!planIdSelect) return;

      if (selectedType) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'partial/processor.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            planIdSelect.innerHTML = xhr.responseText;
          }
        };

        xhr.send(`data_type=${encodeURIComponent(selectedType)}&network_provider=${encodeURIComponent(networkProvider)}`);
      } else {
        planIdSelect.innerHTML = '';
      }
    });
  });
});

✅ 进阶建议（提升健壮性）

✅ 防抖处理：若 data_type 选项较多或后端响应慢，可添加简单防抖避免频繁请求；
✅ 加载状态提示：在 xhr.send() 前设置 planIdSelect.innerHTML = ''，提升用户体验；
✅ 错误处理：补充 xhr.status !== 200 或 onerror 回调，显示友好错误信息；
✅ 现代替代方案：推荐迁移到 fetch() API，配合 async/await 提升可读性（兼容性需考虑）：

// fetch 版本示例（需 Promise 包裹）
const loadPlans = async (type, network) => {
  try {
    const res = await fetch('partial/processor.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: `data_type=${encodeURIComponent(type)}&network_provider=${encodeURIComponent(network)}`
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.text();
  } catch (err) {
    console.error('Failed to load plans:', err);
    return '';
  }
};