El cuadro de texto población basado en la selección desplegable - JavaScript

Al desarrollar una aplicación web, es normal agregar un formulario con una lista desplegable y un cuadro de texto. El usuario puede seleccionar un valor de varias opciones utilizando la lista desplegable, y el valor seleccionado se muestra en el cuadro de texto. Para lograr esta funcionalidad, use el "cambiar"Evento con la ayuda del"addEventListener ()" método.

Este artículo definirá el procedimiento para llenar el cuadro de texto dependiendo de la selección desplegable usando JavaScript.

Cómo completar el cuadro de texto basado en la selección desplegable en JavaScript?

Para llenar o llenar un cuadro de texto basado en una selección desplegable, utilice el desplegable "cambiar"Evento que detectará la opción seleccionada por el usuario y establecerá el valor del cuadro de texto.

Ejemplo
Cree una etiqueta para desplegable usando el elemento HTML llamado:

Seleccione un idioma que desee aprender:

Cree una lista desplegable usando las etiquetas y. El desplegable contiene la lista de idiomas:

Seleccionar…
Html
CSS
Javascript
Java
Pitón

Aquí, crearemos un cuadro de texto con "solo lectura"Atributo que llenará automáticamente con la opción seleccionada:

Idioma seleccionado:

Ahora, en el archivo JavaScript, o una etiqueta, primero, obtendremos la referencia de ambos elementos "desplegable" y el "cuadro de texto" utilizando sus IDS asignados con la ayuda de "getElementById ()" método:

Const desplegable = documento.getElementById ('desplegable');
const textbox = documento.getElementById ('TextBox');

Llama a "addEventListener ()"Método en el menú desplegable y use el"cambiar"Evento que se disparará cuando la opción se seleccione de la lista desplegable. Recuperar el valor seleccionado usando el "objetivo.valor"Atributo y configelo en el cuadro de texto usando el"valor" atributo:

desplegable.addEventListener ('Change', (Event) =>
const selectedLanguage = evento.objetivo.valor;
caja de texto.valor = selectionLanguage;
);

La salida indica que el valor seleccionado del menú desplegable se ha agregado correctamente en el cuadro de texto:

Eso se trata del cuadro de texto de población basado en la selección desplegable en JavaScript.

Conclusión

Para completar o llenar un cuadro de texto basado en una selección desplegable, use el desplegable "cambiar" evento. Detectará la opción seleccionada por el usuario y los establecerá como valor de un cuadro de texto. Este artículo describió el procedimiento para llenar el cuadro de texto dependiendo de la selección desplegable usando JavaScript.