How to use a switch with a select input in JS?

Question

I have a selection input in a form, and I want to show some text according to what the user selected.

I'm using this select:

<select required class="form-control" name="tema" id="selectorTema" onchange="generarFaqs()">
                        <option>Seleccione una opción</option>
                        <option id="material">Tengo problemas para acceder al material del curso</option>
                        <option id="notaExamen" >Tengo problemas con la nota recibida en un examen</option>
                        <option id="envioPago" >Quiero avisar de un pago que hice o saber si estoy debiendo alguna cuota</option>
                        <option id="envioDoc" >Tengo problemas relacionados con el envio de la documentacion solicitada</option>
                        <option id="certificado" >Quiero saber como obtener mi certificado</option>
                        <option id="docente" >Quiero preguntar a un docente por una duda con el material de una bolilla</option>
                        <option id="otro" >Otro</option>
                    </select>
                </div>
<span id="output"></span>

And this is my function. The thing is that I don't know how to manage the switch to show a different thing according to the selection. I've tried with an if/else if, but I'm quite new in JS and would like to use a switch.

function generarFaqs() {
  var select = document.querySelector("select");
  var output = document.querySelector("#output");

  var material = document.querySelector("#material");
  var notaExamen = document.querySelector("#notaExamen");
  var envioPago = document.querySelector("#envioPago");
  var envioDoc = document.querySelector("#envioDoc");
  var certificado = document.querySelector("#certificado");
  var docente = document.querySelector("#docente");
  select.addEventListener("change", function() {

    switch(expression) {
        case material:
            output.append('aaa'); 
            break;
        case notaExamen:
            output.append('bbb'); 
            break;
        case envioPago:
            output.append('ccc'); 
            break;
        case envioDoc:
            output.append('ddd'); 
            break;
        case certificado:
            output.append('eee'); 
            break;
        case docente:
            output.append('fff'); 
            break;

        default:
            default code block
    }         

  });
}

Answer 1

Perhaps you want a little less verbose code?

NOTE: Imagine someone having to read and understand the switch statement every time they needed to do something in the file or having to read the below function.

Javascript

function generalFaqs(select) {
  document.getElementById("output").innerHTML = select.value;
}

HTML

<select required class="form-control" name="tema" id="selectorTema" onChange="generalFaqs(this);">
  <option>Seleccione una opción</option>
  <option>Tengo problemas para acceder al material del curso</option>
  <option>Tengo problemas con la nota recibida en un examen</option>
  <option>Quiero avisar de un pago que hice o saber si estoy debiendo alguna cuota</option>
  <option>Tengo problemas relacionados con el envio de la documentacion solicitada</option>
  <option>Quiero saber como obtener mi certificado</option>
  <option>Quiero preguntar a un docente por una duda con el material de una bolilla</option>
  <option>Otro</option>
</select>

<span id="output"></span>

Or you could do this...

HTML

<select class="form-control" name="tema" id="selectorTema" onChange="generalFaqs(this);" required></select>

<span id="output"></span>

Javascript

var options = ["Seleccione una opción",
 "Tengo problemas para acceder al material del curso",
 "Tengo problemas con la nota recibida en un examen",
 "Quiero avisar de un pago que hice o saber si estoy debiendo alguna cuota",
 "Tengo problemas relacionados con el envio de la documentacion solicitada",
 "Quiero saber como obtener mi certificado",
 "Quiero preguntar a un docente por una duda con el material de una bolilla",
 "Otro"];

var select = document.getElementById("selectorTema");
buildSelectOptions();

function generalFaqs(select) {
  document.getElementById("output").innerHTML = select.value;
}

function buildSelectOptions(){
  for(var index = 0; index < options.length; index++) {
    var option = document.createElement('option');
    option.innerHTML = options[index];
    option.value = options[index];
    select.appendChild(option);
  }
}

Answer 2

First of all, you need to change the <option> tags to use value attribute instead of id. So, that'd become like:

<option value="material">Tengo problemas para acceder al material del curso</option>

With that change, you can access the value of the select better. So:

function generarFaqs() {
  var select = document.querySelector("select");
  var output = document.querySelector("#output");

  select.addEventListener("change", function(evt) {
    var expression = evt.target.value;

      switch(expression) {
        case 'material':
          output.innerHTML = 'aaa'; 
          break;
        case 'notaExamen':
          output.innerHTML = 'bbb'; 
          break;
        case 'envioPago':
          output.innerHTML = 'ccc'; 
          break;
        case 'envioDoc':
          output.innerHTML = 'ddd'; 
          break;
        case 'certificado':
          output.innerHTML = 'eee'; 
          break;
        case 'docente':
          output.innerHTML = 'fff'; 
          break;
        default:
          output.innerHTML = 'default';
   }         

 });
}
generarFaqs();

Where

var expression = evt.target.value;

it's the place that you can grab the value set in the select.

Answer 3

Are you just missing the selected item? This should get it for you.

var e = document.getElementById("selectorTema");
var expression = e.options[e.selectedIndex].value;