JS表单：多级联动下拉框动态填充（时间选项实现求助）

嘿，我仔细看了你的表单代码，前两步的动态联动已经做得很到位啦！现在要实现时间选项跟着门店类型和日期联动，其实思路和你之前做的是相通的，只是需要同时结合两个选择项的参数来筛选对应的时间。我给你一步步拆解怎么弄：

第一步：准备时间关联数据 #

首先你需要把时间选项和对应的「门店类型+日期」做绑定，比如用一个嵌套的对象来存储数据，这样可以快速根据选中的两个值找到对应的时间列表：

// 示例数据，你可以根据实际业务调整内容
const timeData = {
  "旗舰店": {
    "2024-05-20": ["09:00", "10:30", "14:00", "16:30"],
    "2024-05-21": ["10:00", "13:00", "15:30", "17:00"]
  },
  "社区店": {
    "2024-05-20": ["08:30", "11:00", "14:30", "18:00"],
    "2024-05-21": ["09:30", "12:30", "16:00", "17:30"]
  }
};

如果你的时间数据是从后端接口获取的，这一步可以换成接口请求，后面我会补充这种情况的写法。

第二步：写一个通用的时间更新函数 #

这个函数会读取当前选中的门店类型和日期，然后匹配对应的时间选项，渲染到时间下拉框里：

function updateTimeSelect() {
  // 获取当前选中的门店类型和日期
  const selectedStore = document.querySelector('select[name="storeType"]').value;
  const selectedDate = document.querySelector('select[name="date"]').value;
  const timeSelect = document.querySelector('select[name="time"]');

  // 先清空现有选项，显示默认提示
  timeSelect.innerHTML = '<option value="">请选择时间</option>';

  // 如果门店或日期没选，直接返回
  if (!selectedStore || !selectedDate) return;

  // 获取对应的时间列表，没有的话返回空数组
  const availableTimes = timeData[selectedStore]?.[selectedDate] || [];

  // 生成时间选项并添加到下拉框
  availableTimes.forEach(time => {
    const option = document.createElement('option');
    option.value = time;
    option.textContent = time;
    timeSelect.appendChild(option);
  });
}

第三步：给下拉框绑定事件 #

需要同时监听门店类型和日期的变化事件，触发时间更新函数：

// 监听门店类型变化：你原来的代码已经会更新日期，现在加上更新时间
document.querySelector('select[name="storeType"]').addEventListener('change', function() {
  // 这里保留你原来更新日期的代码...
  
  // 新增：更新时间选项
  updateTimeSelect();
});

// 监听日期变化，直接触发时间更新
document.querySelector('select[name="date"]').addEventListener('change', updateTimeSelect);

额外：如果时间数据来自后端接口 #

如果你的时间选项是通过接口动态获取的，只需要把上面的updateTimeSelect改成异步请求的版本就行：

async function updateTimeSelect() {
  const selectedStore = document.querySelector('select[name="storeType"]').value;
  const selectedDate = document.querySelector('select[name="date"]').value;
  const timeSelect = document.querySelector('select[name="time"]');

  timeSelect.innerHTML = '<option value="">加载中...</option>';

  if (!selectedStore || !selectedDate) {
    timeSelect.innerHTML = '<option value="">请选择时间</option>';
    return;
  }

  try {
    // 替换成你的实际接口地址
    const response = await fetch(`/api/getAvailableTimes?storeType=${selectedStore}&date=${selectedDate}`);
    const availableTimes = await response.json();

    timeSelect.innerHTML = '<option value="">请选择时间</option>';
    availableTimes.forEach(time => {
      const option = document.createElement('option');
      option.value = time;
      option.textContent = time;
      timeSelect.appendChild(option);
    });
  } catch (err) {
    timeSelect.innerHTML = '<option value="">加载失败，请重试</option>';
    console.error('获取时间选项出错:', err);
  }
}

最后检查HTML #

确保你的表单里已经有时间下拉框的元素：

<select name="time" required>
  <option value="">请选择时间</option>
</select>

这样调整后，当用户选完门店类型和日期，时间下拉框就会自动加载对应的选项啦～

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