AJAX DIV refresh solely in JavaScript

I currently have this drop-down DIV combo shown below, based on the user selection it matches the option ID with the DIV and displays the information.

This has been acheived with jQuery but to make it work with the rest of the scripts on the page it needs to be acheieved with JavaScript, which I’m not sure how to do. AJAX seems the only option to do this and refresh the content of the DIV based on the selection, I’m just not sure how to acheive this in JavaScript only.

Is there a way to acheive this in JavaScript only with or without AJAX? It needs to be done in Vanulla JS for speed reasons and to allow it to be placed with other scripts.

$(document).ready(function(e){
    $('#menu').on( 'change keyup', function() {
        var selected = this.value;
        // Load data
        $('.noselection').hide();
        $('.hideprev').hide();      
        $('.' + selected).show();
});
});
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;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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>

Thanks in advance.

141 thoughts on “AJAX DIV refresh solely in JavaScript”