Javascript 根据选择的下拉选项在DIV中显示信息

我一直在尝试几种不同的方法。我从手风琴开始，但是页面太高了，即使是分组。考虑了一种模式，但这意味着用户屏幕上会弹出一些东西。选项卡也被考虑用于此，因此用户可以选择一年和一个月来显示过去的事件，但这很快就会变得混乱。被考虑过，但不够灵活

我已经确定，下拉列表是进行此操作的最佳方式，然后在下面的DIV中显示正确的数据。我只是不确定一个方法，但我认为这个基础很好。其思想是，选择的选项值option value=value将触发一个具有匹配类的DIV变得可见，因此。选择新值时，需要隐藏以前的值

每个DIV中都会有来自另一个来源的动态内容，但每个月都会手动添加一个新的部分，如果要通过脚本完成此操作，则需要基于显示与值的匹配来工作，这样脚本就不需要随着每次新添加而不断更改

DIV要么不存在，要么显示一条消息，说明您需要首先在上面进行选择，要么显示最近一个月的可用信息

下面是到目前为止我所知道的，不确定如何实现这种显示交换

挑选{ 宽度：100%； 填充：15px； 显示：内联块； 边框左上半径：15px； 边框右上角半径：15px； 边框左下半径：0； 边框右下半径：0； 边界：0； 颜色：黑色； 背景：红色； 大纲：无； 外观：无； } .内容{ 最小高度：250px； 边框左上半径：0； 边框右上角半径：0； 边框左下半径：15px； 边框右下半径：15px； 边框：纯红5px； 填充：10px； } 一月 二月 一月 二月 前进 四月 也许 六月 七月 八月 九月 十月 十一月 十二月 您需要首先在上面进行选择 内容自2020年1月起 2020年2月的内容 2020年3月的内容 2020年4月的内容 2020年5月的内容 2020年6月的内容 2020年7月的内容 2020年8月的内容 2020年9月的内容 2020年10月的内容 2020年11月的内容 2020年12月的内容 2021年1月的内容 2021年2月的内容

---

这很接近，但每次都会添加内容。选择其他选项时，应将第一个选项设置为invisible@helpmeplease刚刚更新的Works，非常感谢。@helpmeplease没有问题Ajax有几个问题，我猜没有jquery纯JS解决方案是不可能的？？页面上不能使用外部库，只能使用JS脚本。

<style>
select {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 0;
  color: black;
  background: red;
  outline: none;
  appearance: none;
}

.content {
  min-height: 250px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border: solid red 5px;
  padding: 10px;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(document).ready(function(e){
    $('#menu').on( 'change keyup', function() {
        var selected = this.value;
        // Load data
        $('.noselection').hide();
        $('.hideprev').hide();      
        $('.' + selected).show();
});
});
</script>
<select id="menu">
  <optgroup label="2021">
    <option value="January21">January</option>
    <option value="February21">February</option>
    <optgroup label="2020">
      <option value="January20">January</option>
      <option value="February20">February</option>
      <option value="March20">March</option>
      <option value="April20">April</option>
      <option value="May20">May</option>
      <option value="June20">June</option>
      <option value="July20">July</option>
      <option value="August20">August</option>
      <option value="September20">September</option>
      <option value="October20">October</option>
      <option value="November20">November</option>
      <option value="December20">December</option>
</select>
<div class="content">

  <div class="noselection">You need to make a selection above first</div>
  <div style="display:none;" class="January20 hideprev">Content from January 2020</div>
  <div style="display:none;" class="February20 hideprev">Content from February 2020</div>
  <div style="display:none;" class="March20 hideprev">Content from March 2020</div>
  <div style="display:none;" class="April20 hideprev">Content from April 2020</div>
  <div style="display:none;" class="May20 hideprev">Content from May 2020</div>
  <div style="display:none;" class="June20 hideprev">Content from June 2020</div>
  <div style="display:none;" class="July20 hideprev">Content from July 2020</div>
  <div style="display:none;" class="August20 hideprev">Content from August 2020</div>
  <div style="display:none;" class="September20 hideprev">Content from September 2020</div>
  <div style="display:none;" class="October20 hideprev">Content from October 2020</div>
  <div style="display:none;" class="November20 hideprev">Content from November 2020</div>
  <div style="display:none;" class="December20 hideprev">Content from December 2020</div>
  <div style="display:none;" class="January21 hideprev">Content from January 2021</div>
  <div style="display:none;" class="February21 hideprev">Content from February 2021</div>

</div>