Entrar Ainda não tem acesso?
1
resposta

Comparar valores de um select

por Gustavo Nascimento Pereira
| 165.4k xp | 14 posts
AUXILIAR ADMINISTRATIVO II

Boa noite,

Estou tentando comparar dois valores sendo cada um de selects diferentes mas opções idênticas. Imagino que preciso iterar visto que são nodeList (acho). Queimei muito a mufa hoje mas sem êxito. Segue código.

Desde já agradeço.

<select name="selecoes" id="grupoA">
                <option selected value=""></option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
</select>

 <select name="selecoes" id="grupoB">
                <option selected value=""></option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select>
//aqui eu pego o texto mas não sei como comparar
var select = document.getElementById('grupoA');
var texto1 = select.addEventListener('change', function(){
    var optionA = this.selectedOptions[0];
    texto1 = optionA.textContent;   
});

var selectB = document.getElementById('grupoB');
var texto2 = selectB.addEventListener('change', function(){
    var optionB = this.selectedOptions[0];
    textoB = optionB.textContent;
    console.log(textoB);   
});
1 resposta
por Lorena Garcia
| 8304.5k xp | 12158 posts
Alura Scuba Team Suporte Educacional

Olá Gustavo, tudo bem?

Desculpe a demora em retornar.

Uma forma de fazer isso é comparando o valor do atributo "value" dos selects. Você pode fazer isso dentro dos seus event listeners de change.

Por exemplo:

var select = document.getElementById('grupoA');
var texto1 = select.addEventListener('change', function(){
    var optionA = this.selectedOptions[0];
    var valor1 = optionA.value;
    var selectB = document.getElementById('grupoB');
    var optionB = selectB.selectedOptions[0];
    var valor2 = optionB.value;
    if (valor1 === valor2) {
        console.log("Os valores selecionados são iguais!");
    } else {
        console.log("Os valores selecionados são diferentes.");
    }
});

var selectB = document.getElementById('grupoB');
var texto2 = selectB.addEventListener('change', function(){
    var optionB = this.selectedOptions[0];
    var valor2 = optionB.value;
    var select = document.getElementById('grupoA');
    var optionA = select.selectedOptions[0];
    var valor1 = optionA.value;
    if (valor1 === valor2) {
        console.log("Os valores selecionados são iguais!");
    } else {
        console.log("Os valores selecionados são diferentes.");
    }
});

Dessa forma, sempre que um dos selects for alterado, o código irá comparar os valores selecionados nos dois selects e exibirá uma mensagem no console indicando se os valores são iguais ou diferentes.

Você pode ver o resultado aqui no codepen.

Um abraço e bons estudos.