AJAX DIV refresh solely in JavaScript

Question

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 Vanilla 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;
}






  You need to make a selection above first
  Content from January 2020
  Content from February 2020
  Content from March 2020
  Content from April 2020
  Content from May 2020
  Content from June 2020
  Content from July 2020
  Content from August 2020
  Content from September 2020
  Content from October 2020
  Content from November 2020
  Content from December 2020
  Content from January 2021
  Content from February 2021

Thanks in advance.

G-Cyrillus · Accepted Answer

You can add / remove class when selected option is updated. via js, you need to add an event listener, then loop on your content div. Since the contents to show/hide stand already here, switching a class to update display state should be enough..

see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

basic possible example

let select = document.querySelector("#menu");
let options = document.querySelectorAll(".content>div");

select.addEventListener("change", function() {
// here do something once selected option is changed 

// example looping on a few div and comparing classname to select.value 
  for (i = 0; i < options.length; i++) {
    options[i].classList.remove("showprev");
    if (options[i].classList.contains(this.value)) {
      options[i].classList.add("showprev");
    }
// end loop example     
  }
});

.hideprev {
  display: none;
}

.showprev {
  display: block;
}

/* from your previous post */

select {
  cursor:pointer; /* show it is clickable  */
  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;
}



  You need to make a selection above first
  Content from January 2020
  Content from February 2020
  Content from March 2020
  Content from April 2020
  Content from May 2020
  Content from June 2020
  Content from July 2020
  Content from August 2020
  Content from September 2020
  Content from October 2020
  Content from November 2020
  Content from December 2020
  Content from January 2021
  Content from February 2021

p.s. no need to delete a question and repost it almost right away, it can take a few hours and even days before someone answers. Real human are on the other side with private life and eventually jobs to do too.

AJAX DIV refresh solely in JavaScript

Answers (2)

Related Questions