请求实现下拉框联动：一级选First Year/Second Year时展示对应Sem选项

没问题，我来帮你搞定这个下拉框联动需求！下面是完整的实现代码，你可以直接复用，也能根据自己现有代码调整适配：

1. 基础HTML结构 #

先把两个下拉框的基础结构写好，第一个选年份，第二个对应显示学期：

<!-- 年份选择下拉框 -->
<select id="yearPicker">
  <option value="">请选择学年</option>
  <option value="first">First Year</option>
  <option value="second">Second Year</option>
  <option value="third">Third Year</option>
  <!-- 要是有更多学年，直接在这里加option就行 -->
</select>

<!-- 学期选择下拉框，初始显示提示 -->
<select id="semesterPicker">
  <option value="">请先选择学年</option>
</select>

2. 核心联动逻辑（JavaScript） #

接下来写关键的联动代码，监听年份选择的变化，动态更新学期选项：

// 先拿到两个下拉框的DOM元素
const yearPicker = document.getElementById('yearPicker');
const semesterPicker = document.getElementById('semesterPicker');

// 定义学年和学期的对应关系，后续修改/扩展直接改这个对象就行
const yearToSemesters = {
  first: ['Sem1', 'Sem2'],
  second: ['Sem3', 'Sem4'],
  third: ['Sem5', 'Sem6'],
  // 比如加个Fourth Year的话，就加一行：fourth: ['Sem7', 'Sem8']
};

// 给年份下拉框加个变化监听事件
yearPicker.addEventListener('change', function() {
  // 先清空学期下拉框的旧选项
  semesterPicker.innerHTML = '';
  
  // 获取当前选中的学年值
  const selectedYear = this.value;
  
  if (!selectedYear) {
    // 要是用户选了初始的空选项，就重置学期框为提示状态
    const tipOption = document.createElement('option');
    tipOption.value = '';
    tipOption.textContent = '请先选择学年';
    semesterPicker.appendChild(tipOption);
    return;
  }
  
  // 根据选中的学年拿到对应的学期列表
  const semesters = yearToSemesters[selectedYear];
  
  // 把每个学期加到下拉框里
  semesters.forEach(sem => {
    const option = document.createElement('option');
    option.value = sem.toLowerCase(); // 这里的value可以按需设置，比如用sem的小写或者自定义值
    option.textContent = sem;
    semesterPicker.appendChild(option);
  });
});

3. 适配你现有代码的小提示 #

如果你已经有自己的下拉框代码了，只需要做这两步：

• 把代码里的yearPicker和semesterPicker换成你自己的下拉框ID
• 调整yearToSemesters对象里的键值对，匹配你的学年和学期对应关系就行

这个方案的好处是逻辑清晰，后续扩展非常方便，完全满足你要的“选First Year显示Sem1/Sem2，选Second Year显示Sem3/Sem4”的需求~

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