如何用JavaScript或jQuery实现起始年与结束年的联动下拉框？

当然可以实现这个需求！不管是原生JavaScript还是jQuery都能轻松搞定，我给你两种实用的方案，你可以根据自己的技术栈选择：

方案一：原生JavaScript实现 #

这个方案不需要依赖任何外部库，直接用浏览器原生API就能完成。核心思路是监听起始年下拉框的change事件，根据选中的值动态控制结束年选项的显示/隐藏：

// 获取两个下拉框元素
const startingYearSelect = document.getElementById('starting_year');
const endingYearSelect = document.getElementById('ending_year');

// 给起始年下拉框添加变更事件监听
startingYearSelect.addEventListener('change', function() {
  const selectedStartYear = this.value;
  
  // 遍历结束年的所有选项，逐个控制显示状态
  Array.from(endingYearSelect.options).forEach(option => {
    if (selectedStartYear === '2016') {
      // 当起始年是2016时，只显示2017和2018
      option.style.display = (option.value === '2017' || option.value === '2018') ? 'block' : 'none';
    } else {
      // 其他情况恢复显示所有选项
      option.style.display = 'block';
    }
  });
});

方案二：jQuery实现 #

如果你的项目里已经引入了jQuery，用它来写会更简洁直观：

// 监听起始年下拉框的change事件
$('#starting_year').on('change', function() {
  const selectedValue = $(this).val();
  
  // 遍历结束年选项，根据选中值切换显示状态
  $('#ending_year option').each(function() {
    if (selectedValue === '2016') {
      // 仅显示2017和2018选项
      $(this).toggle($(this).val() === '2017' || $(this).val() === '2018');
    } else {
      // 恢复所有选项的显示状态
      $(this).show();
    }
  });
});

额外说明 #

• 你提供的原始HTML代码不需要做任何修改，只需要把上面的JS代码放在页面底部（或者DOM加载完成的回调函数里）就能生效。
• 如果后续需要扩展其他年份的规则，比如起始年选2017时结束年只能选2018，只需要修改判断条件里的年份值即可，扩展性很强。

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