基于下拉框选择实现Div显示/隐藏功能并自动移除过期月份选项的技术实现求助

我来给你搞定这个需求！下面是一套完整的前端实现方案，包含HTML结构、基础样式和核心JavaScript逻辑，完美匹配你的要求：

1. HTML 结构 #

首先我们需要一个下拉选择框，以及对应每个月份的内容容器。用data-month属性把下拉选项和内容容器关联起来，方便后续JS操作：

<!-- 月份选择下拉框 -->
<select id="monthSelector">
  <option value="1">1月</option>
  <option value="2">2月</option>
  <option value="3">3月</option>
  <option value="4">4月</option>
  <option value="5">5月</option>
  <option value="6">6月</option>
  <option value="7">7月</option>
  <option value="8">8月</option>
  <option value="9">9月</option>
  <option value="10">10月</option>
  <option value="11">11月</option>
  <option value="12">12月</option>
</select>

<!-- 各月份对应的内容容器 -->
<div class="month-content" data-month="1">
  <h3>1月内容</h3>
  <p>这是1月份的专属文本和相关内容...</p>
</div>
<div class="month-content" data-month="2">
  <h3>2月内容</h3>
  <p>这是2月份的专属文本和相关内容...</p>
</div>
<div class="month-content" data-month="3">
  <h3>3月内容</h3>
  <p>这是3月份的专属文本和相关内容...</p>
</div>
<!-- 剩下的月份容器以此类推，复制上面的结构修改data-month和内容即可 -->

2. CSS 基础样式 #

给内容容器设置默认隐藏，只有选中的容器才会显示：

/* 默认隐藏所有月份内容 */
.month-content {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 显示选中的月份内容 */
.month-content.active {
  display: block;
}

/* 可选：美化下拉框 */
#monthSelector {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 16px;
}

3. JavaScript 核心逻辑 #

这部分是关键，负责自动移除过期月份选项、默认选中当前月份，以及切换显示对应内容：

document.addEventListener('DOMContentLoaded', function() {
  // 获取关键元素
  const monthSelector = document.getElementById('monthSelector');
  const contentDivs = document.querySelectorAll('.month-content');
  
  // 获取当前月份（注意：getMonth()返回0-11，所以要+1转成1-12）
  const currentMonth = new Date().getMonth() + 1;

  // 第一步：移除过期的月份选项
  // 遍历所有选项，把月份小于当前月份的选项删掉
  Array.from(monthSelector.options).forEach(option => {
    const optionMonth = parseInt(option.value);
    if (optionMonth < currentMonth) {
      monthSelector.removeChild(option);
    }
  });

  // 第二步：默认选中当前月份（如果还存在的话）
  const currentOption = monthSelector.querySelector(`option[value="${currentMonth}"]`);
  if (currentOption) {
    currentOption.selected = true;
    // 显示当前月份的内容
    showMonthContent(currentMonth);
  }

  // 第三步：绑定下拉框切换事件
  monthSelector.addEventListener('change', function() {
    const selectedMonth = parseInt(this.value);
    showMonthContent(selectedMonth);
  });

  // 辅助函数：显示指定月份的内容，隐藏其他内容
  function showMonthContent(month) {
    contentDivs.forEach(div => {
      const divMonth = parseInt(div.dataset.month);
      if (divMonth === month) {
        div.classList.add('active');
      } else {
        div.classList.remove('active');
      }
    });
  }
});

功能说明 #

• 自动移除过期选项：页面加载时，JS会自动检测当前月份，把所有早于当前月份的选项从下拉框中删除，用户再也看不到过期的月份选项。
• 默认显示当前月份内容：页面加载完成后，会自动选中当前月份并显示对应的内容。
• 下拉切换显示：用户选择下拉框中的月份时，会自动切换显示对应的内容容器，隐藏其他容器。

你可以根据自己的需求修改每个月份的内容，调整CSS样式来匹配你的网站风格。如果需要支持跨年的场景（比如12月之后到次年1月），只需要在判断逻辑里加上年份的判断即可，这个代码基础上扩展很容易。

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