post
Código JavaScript para Manipular/Alterar Opção Selecionada do Campo Select de um Formulário
Publicado em: 03/09/2024 / Atualizado em: 03/09/2024
Neste post vou mostrar como é simples criar uma opção customizada com javascript, para manipular o campo select de um formulário, para atualizar a opção selecionada, quando clicar em uma Div especifica.
No exemplo abaixo mostro uma estrutura HTML simples para ilustrar como seria a arquitetura do código:
<div class="box-opcoes-form" data-option-select="option1">Div 1</div> <div class="box-opcoes-form" data-option-select="option2">Div 2</div> <div class="box-opcoes-form" data-option-select="option3">Div 3</div> <select name="form_fields[assunto]"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>
Abaixo, segue código javascript que realiza a manipulação do formulário em HTML:
<script> document.querySelectorAll('.box-opcoes-form').forEach(div => { div.addEventListener('click', function () { const value = this.getAttribute('data-option-select'); const selector = document.querySelector('select[name="form_fields[assunto]"]'); selector.value = value; }); }); </script>
Basicamente, quando o usuário clicar em uma Div, automaticamente o código javascript vai pegar o valor do atributo “data-option-select” e selecionar a opção correspondente no campo select do formulário.
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/5631
ID de Referência: 5631
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.