How can a drop down dynaically change a web app?

I am working with a Google App Script web app that is going to be used to display student micro-credentials. The goal is to make it so I can use a dropdown to choose which classes are displayed. I have created the dropdown on the web app by copying from W3Schools, but it doesn't actually function. I need some help getting the dropdown to do what I need it today.

In the example screen you can see the view I have set up and the dropdown with three classes:

The data for this web app is stored on a Google Sheet, like this:

And the doGet looks like this:

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('WebApp');
  var pictures = getPictures(classSelection);
  var names = getNames(classSelection);
  var cutBelts = getCutBelts(classSelection);
  var measureBelts = getMeasureBelts(classSelection);
  var bindBelts = getBindBelts(classSelection);

  var classSize = 10;

  if(pictures.length<10){
    classSize=pictures.length;
  }


  htmlOutput.pictures = pictures;
  htmlOutput.names = names;
  htmlOutput.cutBelts = cutBelts;
  htmlOutput.measureBelts = measureBelts;
  htmlOutput.bindBelts = bindBelts;
  htmlOutput.classSize = classSize;

  return htmlOutput.evaluate();
}

Where the variable "classSelection" is equal to the name of the class (101, 201, or 202) and the five 'get' functions (getPictures, getNames) return the picture, names, etc for that class as an array.

Okay, so here is my specific issue I need help with.

1. How do I get the dropdown to send data (the class) back to the doGet so that the variable "classSelection" updates and displays only the selected class?

Again, for the code I used to create the dropdown (html, css, and script) see this link, I literally copy-pasted and only changed the drop down titles