如何在JS中使用带有选择输入的开关？

Question

我在表单中有一个选择输入，并且我想根据用户选择的内容显示一些文本。

我使用这个选择：

<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> 

这是我的职责。 事情是，我不知道如何管理交换机根据选择显示不同的东西。我已经尝试了if/else if，但我在JS中很新，并且想要使用开关。

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

首先，您需要更改<option>标签使用value属性，而不是id。所以，那会变成：

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

通过该更改，您可以更好地访问选择的值。所以：

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(); 

凡

var expression = evt.target.value; 

它是可以抢在选择设定值的地方。

Answer 2

你只是缺少选定的项目？这应该为你获得。

所有的

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

Answer 3

也许你想要少一些冗长的代码？

NOTE：想象一下，每当需要在文件中执行某些操作或必须读取下面的函数时，必须阅读并理解switch语句。

的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> 

或者你可以做到这一点...

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