如何不使用Ajax、PHP实现基于MySQL数据的下拉列表联动？

嘿，这个需求完全可以用纯HTML+JavaScript搞定，不用依赖后端服务或者异步请求。结合你提供的MySQL表数据，我给你写个完整的示例：

步骤1：把MySQL数据转成前端可访问的结构化对象 #

首先，我们需要把数据库里的模块、时间和状态数据，转换成JavaScript对象（因为前端没法直接读取MySQL，所以我们提前把数据导出成这种格式）：

const moduleData = {
  "Chemistry": [
    { date: "Tuesday, 10:00", status: "full" },
    { date: "Wednesday, 11:00", status: "full" },
    { date: "Thursday, 12:00", status: "empty" },
    { date: "Thursday, 11:00", status: "full" }
  ],
  "Biology": [
    { date: "Tuesday, 10:00", status: "full" },
    { date: "Wednesday, 12:00", status: "full" },
    { date: "Tuesday, 12:00", status: "full" }
  ]
  // 这里可以继续补充其他模块的数据
};

步骤2：编写HTML结构 #

我们需要两个下拉列表，第一个选择模块，第二个根据选择动态填充对应的时间选项（还可以把状态显示在选项里）：

<label for="module-select">选择模块：</label>
<select id="module-select">
  <option value="">请选择模块</option>
  <option value="Chemistry">Chemistry</option>
  <option value="Biology">Biology</option>
  <!-- 补充其他模块选项 -->
</select>

<br><br>

<label for="time-select">可选时间：</label>
<select id="time-select" disabled>
  <option value="">请先选择模块</option>
</select>

步骤3：编写JavaScript逻辑 #

监听第一个下拉框的change事件，根据选中的模块，动态生成第二个下拉框的选项：

// 获取下拉框元素
const moduleSelect = document.getElementById('module-select');
const timeSelect = document.getElementById('time-select');

// 绑定change事件监听
moduleSelect.addEventListener('change', function() {
  const selectedModule = this.value;
  
  // 清空第二个下拉框的旧选项
  timeSelect.innerHTML = '';
  
  if (!selectedModule) {
    // 如果没选模块，禁用第二个下拉框并提示
    timeSelect.disabled = true;
    const defaultOption = document.createElement('option');
    defaultOption.textContent = '请先选择模块';
    timeSelect.appendChild(defaultOption);
    return;
  }
  
  // 启用第二个下拉框
  timeSelect.disabled = false;
  
  // 遍历选中模块对应的时间数据，生成选项
  moduleData[selectedModule].forEach(item => {
    const option = document.createElement('option');
    // 把时间和状态都显示在选项里，方便用户查看
    option.textContent = `${item.date} (${item.status})`;
    // 可以把时间作为value，或者自定义需要的值
    option.value = item.date;
    timeSelect.appendChild(option);
  });
});

说明 #

• 这种方式的核心是把后端数据提前嵌入到前端代码中，适合数据不经常变动的场景。如果数据需要实时更新，那还是得用后端配合，但你明确要求不用Ajax/PHP，这个方案完全符合需求。
• 你可以根据实际需求调整选项的显示内容，比如只显示时间，或者把状态作为额外的提示信息。

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