Preencher a caixa de texto com base na seleção suspensa - JavaScript

Ao desenvolver um aplicativo da web, é normal adicionar um formulário com uma lista suspensa e uma caixa de texto. O usuário pode selecionar um valor de várias opções usando a lista suspensa e o valor selecionado é mostrado na caixa de texto. Para alcançar essa funcionalidade, use o “mudarEvento com a ajuda do “addEventListener ()”Método.

Este artigo definirá o procedimento para preencher a caixa de texto, dependendo da seleção suspensa usando JavaScript.

Como preencher a caixa de texto com base na seleção suspensa em javascript?

Para preencher ou preencher uma caixa de texto com base em uma seleção suspensa, utilize o suspensão “mudar”Evento que detectará a opção selecionada pelo usuário e definirá o valor da caixa de texto.

Exemplo
Crie um rótulo para suspensão usando o elemento HTML chamado:

Selecione um idioma que você deseja aprender:

Crie uma lista suspensa usando as tags e. O suspenso contém a lista de idiomas:

Selecione…
Html
CSS
JavaScript
Java
Pitão

Aqui, criaremos uma caixa de texto com “somente leitura”Atributo que preencherá automaticamente com a opção selecionada:

Idioma selecionado:

Agora, no arquivo javascript, ou em uma tag, primeiro, obteremos a referência de ambos os elementos "suspensos" e a "caixa de texto" usando seus IDs atribuídos com a ajuda de "getElementById ()”Método:

const suspenso = documento.getElementById ('suspenso');
const textbox = documento.getElementById ('TextBox');

Ligar para "addEventListener ()”Método no suspensão e use o“mudar”Evento que será demitido quando a opção for selecionada na lista suspensa. Recuperar o valor selecionado usando o “alvo.valor”Atributo e defina -o na caixa de texto usando o“valor”Atributo:

suspenso.addEventListener ('alteração', (evento) =>
const selectectedLanguage = evento.alvo.valor;
caixa de texto.valor = seletedLanguage;
);

A saída indica que o valor selecionado do menu suspenso foi adicionado com sucesso na caixa de texto:

É tudo sobre a caixa de texto populadora com base na seleção suspensa em javascript.

Conclusão

Para preencher ou preencher uma caixa de texto com base em uma seleção suspensa, use o suspenso “mudarEvento. Ele detectará a opção selecionada pelo usuário e o definirá como o valor de uma caixa de texto. Este artigo descreveu o procedimento para preencher a caixa de texto, dependendo da seleção suspensa usando JavaScript.