En una lista desplegable, me gustaría poder mostrar texto personalizado según la elección realizada en la lista.
En mi ejemplo a continuación, logro mostrar el valor seleccionado en el menú desplegable.
Pero, por ejemplo, en lugar de mostrar "var1", me gustaría mostrar más texto, por ejemplo:
Muchas gracias de antemano !
<!DOCTYPE html> <body> <h1 style="color: green"> Que recherchez vous ? </h1> <p> <select id="select1"> <option value="var1">Variable 1</option> <option value="var2">Variable 2</option> <option value="var3">Variable 3</option> </select> </p> <button onclick="getOption()"> Check option </button> <script type="text/javascript"> function getOption() { selectElement = document.querySelector('#select1'); output = selectElement.value; document.querySelector('.output').textContent = output; } </script> <p> The value of the option selected is: <span class="output"></span> </p> </body> </html>El código js:
const longTexts = ["var1 is built with ... (long text)", "var2 is important because... (long text)", "var3 is ... (long text)"]; function getOption() { const select = document.querySelector('#recherche'); const selectedText = longTexts[select.selectedIndex]; document.querySelector('.output').textContent = selectedText; }puedes probar algo como esto, puedes usar el flujo de control Switch-case
<body> <h1 style="color: green"> Que recherchez vous ? </h1> <p> <select id="select1"> <option value="var1">Variable 1</option> <option value="var2">Variable 2</option> <option value="var3">Variable 3</option> </select> </p> <button onclick="getOption()"> Check option </button> <script type="text/javascript"> function getOption() { selectElement = document.querySelector('#select1'); let selectedOption = ''; output = selectElement.value; switch(output) { case "var1": selectedOption = "Variable 1 is built with ... (long text)"; break; case "var2": selectedOption = "Variable 2 is important because... (long text)"; break; default: selectedOption = "default selected"; } document.querySelector('.output').textContent = output + selectedOption; } </script> <p> The value of the option selected is: <span class="output"></span> </p> </body>Según su pregunta, desea que se muestre cierto texto en .output según el value de <select>
Lo que tienes que hacer entonces es:
<select> para cambiar su valor const outputDiv = document.querySelector('.output') // Listen for <select> to change value document.getElementById('select1').addEventListener('input', (evt) => { // Get the selected value const value = evt.target.value // Do the conditional switch (value) { case 'var1': // Set the text outputDiv.textContent = 'something'; break; case 'var2': outputDiv.textContent = 'something else'; break; default: console.log("This shouldn't happen but it did lol"); } })Ahora, si también necesita obtener el valor actual en la primera carga, puede hacer lo siguiente:
document.getElementById('select1').value También puede usar el change de evento, pero es algo diferente. Aquí hay una pregunta relevante para eso: diferencia entre el evento "cambio" y "entrada" para un elemento `entrada`
No noté que tiene un botón para verificar manualmente.
La respuesta seguirá siendo similar. En su lugar, lo que debe hacer es simplemente crear una función a la que llamará su botón con un contenido similar a la respuesta anterior.
function getOption() { // Get current value const value = document.getElementById('select1').value // Do the conditional switch (value) { case 'var1': // Set the text outputDiv.innerHTML = '<b>This is in bold text</b><br>'; break; case 'var2': outputDiv.innerHTML = '<span>something else but not bold</span><br>'; break; default: console.log("This shouldn't happen but it did lol"); } }