Cómo llenar un cuadro de texto basado en la selección de un menú desplegable usando JavaScript

En este artículo, aprenderemos cómo llenar dinámicamente un cuadro de texto en una página web utilizando JavaScript. Se demostrará cómo hacer que la selección de una opción de un menú desplegable afecte el contenido del cuadro de texto. Este tipo de funcionalidad es útil para hacer que sus formularios web sean más interactivos y fáciles de usar.

📋 Aquí podrás encontrar✍

Requisitos
Código base
Código de JavaScript
Ejemplos de código adicional
Conclusión
Preguntas frecuentes

Requisitos

Conocimientos básicos de HTML y CSS.
Conocimientos básicos de JavaScript.
Un editor de texto como Sublime Text, Visual Studio Code o Atom.

Código base

Comencemos creando un archivo HTML básico con un menú desplegable y un cuadro de texto:

<!DOCTYPE html> <html> <head> <title>Página de prueba</title> </head> <body> <select id="mySelect"> <option value="1">Opción 1</option> <option value="2">Opción 2</option> <option value="3">Opción 3</option> </select> <input type="text" id="myTextbox"> </body> </html>

Este código creará una página web básica con un menú desplegable y un cuadro de texto. El menú desplegable tiene tres opciones diferentes y el cuadro de texto está en blanco.

Código de JavaScript

A continuación, agreguemos el código de JavaScript necesario para hacer que la selección del menú desplegable afecte el contenido del cuadro de texto:

<script> const select = document.getElementById("mySelect"); const textbox = document.getElementById("myTextbox");

select.addEventListener("change", function(){ if (select.value === "1"){ textbox.value = "Texto para la opción 1"; } else if (select.value === "2"){ textbox.value = "Texto para la opción 2"; } else { textbox.value = "Texto para la opción 3"; } }); </script>

Este código utiliza el objeto document de JavaScript para seleccionar el menú desplegable y el cuadro de texto por sus IDs. A continuación, se agrega un event listener al menú desplegable que se activará cuando se detecte un cambio en la selección.

Dentro del event listener, se usa una declaración if-else para determinar qué opción del menú desplegable se ha seleccionado y luego se actualiza el valor del cuadro de texto en consecuencia.

Ejemplos de código adicional

Aquí hay algunos ejemplos adicionales de código que se pueden utilizar en conjunto con este código base:

Utilice una API para construir las opciones del menú desplegable dinámicamente según los datos recibidos.
Validar el valor ingresado en el cuadro de texto antes de enviar el formulario.
Agregar más campos de entrada y hacer que la selección de una opción en el menú desplegable afecte múltiples campos.

Conclusión

Este artículo ha demostrado cómo llenar dinámicamente un cuadro de texto en una página web utilizando JavaScript. Con esta funcionalidad, puede crear formularios web más interactivos y fáciles de usar para sus usuarios.

¡Experimenta con el código para ver lo que puedes construir tú mismo!

Preguntas frecuentes

¿Puedo usar este código con otros tipos de campos de entrada?

Sí, este código se puede utilizar con otros tipos de campos de entrada, como casillas de verificación o botones de radio.

¿Cómo puedo hacer que la opción predeterminada en el menú desplegable esté seleccionada cuando la página se carga por primera vez?

Para hacer esto, simplemente agregue el atributo "selected" a la opción que desee que esté seleccionada por defecto:

<select id="mySelect"> <option value="1" selected>Opción 1</option> <option value="2">Opción 2</option> <option value="3">Opción 3</option> </select>

¿Puedo agregar estilos CSS al contenido generado dinámicamente en el cuadro de texto?

Sí, puede agregar estilos CSS al contenido generado dinámicamente en el cuadro de texto utilizando JavaScript. Primero, agregue una clase o ID única al cuadro de texto y luego, en su código JavaScript, actualice el estilo del elemento seleccionando la clase o ID y estableciendo sus propiedades de estilo correspondientes.