Switch case

[John Hebert Trindade]

Bom noite a todos, tenho um formulário onde os campos estão dividido por <div>, também tenho um select com várias opções de estado civil.

até aqui tudo bem, conforme seleciono "Solteiro" por exemplo todos os campos ficam com o style "none", se seleciono Casado, oculta alguns campos e exibe outros, e assim por diante.

só que quando coloco mais de 11 para ficar com o style none já não funciona.

Assim funciona:

//Recebe o estado civil do falecido
const adms_est_civil = document.getElementById('adms_ec_conjuge_id')
const divEstCivil = document.getElementById('genero_conjuge')
const divDadosCasamento = document.getElementById('casamento')
const divDadosDivorcio = document.getElementById('divorcio')
const divDadosViuvez = document.getElementById('viuvez')
const divNomeConjuge = document.getElementById('nome_conjuge')
const divMoradaConjuge = document.getElementById('morada_conjuge')
const divLocalidadeConjuge = document.getElementById('localidade_conjuge')
const divAutarquiasConjuge = document.getElementById('autarquiasconjuge')
const labelAutarquias = document.getElementById('autarquiasconjugelabel')
const labelAutarquiasNascConjuge = document.getElementById('autarquias_nascconjuge')

adms_est_civil.addEventListener('change', function (e) {
  switch (e.target.value) {
      
      // O PRIMEIRO CASE FUNCIONA //
      
    case '1':
      divEstCivil.style.display = 'none'
      divDadosCasamento.style.display = 'none'
      divDadosDivorcio.style.display = 'none'
      divDadosViuvez.style.display = 'none'
      divNomeConjuge.style.display = 'none'
      divMoradaConjuge.style.display = 'none'
      divLocalidadeConjuge.style.display = 'none'
      divAutarquiasConjuge.style.display = 'none'
      labelAutarquias.style.display = 'none'
      divAutarquiasNascConjuge.style.display = 'none'
      break
      
      // O SEGUNDO POR TER 11 JÁ NÃO //
      
      
    case '2':
      divEstCivil.style.display = 'none'
      divDadosCasamento.style.display = 'none'
      divDadosDivorcio.style.display = 'none'
      divDadosViuvez.style.display = 'none'
      divNomeConjuge.style.display = 'none'
      divMoradaConjuge.style.display = 'none'
      divLocalidadeConjuge.style.display = 'none'
      divAutarquiasConjuge.style.display = 'none'
      labelAutarquias.style.display = 'none'
      divAutarquiasNascConjuge.style.display = 'none'
      labelAutarquiasNascConjuge.style.display = 'none'
      break
  }

Já removi uma linha do meio do segundo e assim já funciona, como resolvo, existe um limite?

[John Hebert Trindade]

já fiz assim para teste e funciona:

case '1':
      divEstCivil.style.display = 'none'
      divDadosCasamento.style.display = 'none'
      divDadosDivorcio.style.display = 'none'
      divDadosViuvez.style.display = 'none'
      divNomeConjuge.style.display = 'none'
      divMoradaConjuge.style.display = 'none'
      divLocalidadeConjuge.style.display = 'none'
      divAutarquiasConjuge.style.display = 'none'
      labelAutarquias.style.display = 'none'
      divAutarquiasNascConjuge.style.display = 'none'
      //labelAutarquiasNascConjuge.style.display = 'none'
      //labelBeneficarioConjuge.style.display = 'none'
      divBeneficiarioConjuge.style.display = 'none'

 

[John Hebert Trindade]

Depois de muita luta consegui resolver, o problema não esta na quantidade e sim na ordem

a ordem do javascript tem que estar igual a do arquivo html, ao colocar tudo igual já funcionou.

Deixo aqui para que, se acontecer com alguém, verifiquem a ordem.

Edited August 25, 2024 at 10:22 PM by John Hebert Trindade