Código JavaScript para Manipular/Alterar Opção Selecionada do Campo Select de um Formulário - Bruno Devx - BR Criativus

post #5631

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

Categorias: BlogJavaScript (JS)JS

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:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=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.

Clique aqui e entre em contato