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

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

本文关键字：有选择 输入 开关 JS      更新时间：2023-09-26

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

我使用的是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>

这是我的函数。问题是我不知道如何管理开关，根据选择显示不同的东西。我尝试过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
    }         
  });
}

首先，您需要更改<option>标记以使用value属性而不是id。这就变成了:

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

修改后，您可以更好地访问select的值。所以:

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;

是你可以在select中获取值的地方

您只是错过了选中的项目吗?这应该可以帮你。

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

也许您想要少一些冗长的代码?

注意:想象一下，每次需要在文件中执行操作时，必须阅读并理解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);
  }
}
相关文章：