-2

Queria saber se tem como tipo quando eu selecionar a opção Computador abrir uma lista de opções especificas e quando selecionado Switch abrir uma outra ?

        <fieldset class="field-wrapper select">
          <select name="equipamento" required>
            <option value="">Tipo de equipamento.</option>
            <option value="PC">Computador (Desktop)</option>
            <option value="DELL">Computador (Ultratop DELL)</option>
            <option value="Positivo">Computador (Ultratop Positivo)</option>
            <option value="Roteador">Roteador</option>
            <option value="Switch">Switch</option>
          </select>
          <label class="smart-placeholder" for="enquiry-type">
            Tipo de equipamento.
          </label>
        </fieldset>

0

1 Resposta 1

-3

Adaptei o seu código e fiz o que você descreveu, segue a explicação:

Primeiramente você precisa adicionar uma div para cada valor do select e também você precisa definir um identificador em comum entre cada option do select e sua respectiva div de conteúdo. No exemplo abaixo eu adicionei 6 divs abaixo do fieldset com o atributo data-id cujo o seu valor é exatamente o mesmo que está dentro do value de cada option.

Adicionei um display: none; em todas as divs via CSS, através do seletor div[data-id], que atinge todas as divs que possuem o atributo data-id, independente de seu valor.

Já no javascript eu atribuí um “observador” ao select, que irá detectar toda vez que o valor do select for alterado.

Dentro da função handleChange eu configurei o que acontece toda vez que o select for alterado: Entre a linha 6 e 10 eu defino novamente um display: none em todas as divs que possuem o atributo data-id para garantir que todas as outras divs irão ficar escondidas

Na linha 12 eu faço uso da variável event que trás informações sobre o evento que acabou de ocorrer, e o evento em questão é o change, você pode ver ele sendo adicionado na linha 15. Com event.target.value eu posso acessar o novo valor do select após o termino do evento change, ou seja, a gente tem nas mãos a opção que o usuário escolheu, dai só é lembrar do data-id que eu utilizei o mesmo valor do value de cada option, somando isso conseguimos recuperar a div correspondente a opção e depois só dar um display: block nela.

Se tiver dúvidas, só falar nos comentários :)

const select = document.querySelector('[name=equipamento]');

if(!select) throw("Nenhum elemento encontrado");

function handleChange(event) {  
  const divs = document.querySelectorAll(`[data-id]`);
  
  for(let i = 0, len = divs.length; i < len; i++){
    divs[i].style.display = "none"
  }
  
  document.querySelector(`[data-id=${event.target.value}]`).style.display = 'block';
}

select.addEventListener('change', handleChange, false)
div[data-id] {
  display: none;
}
<fieldset class="field-wrapper select">
  <select name="equipamento" required>
    <option value="padrao">Tipo de equipamento.</option>
    <option value="PC">Computador (Desktop)</option>
    <option value="DELL">Computador (Ultratop DELL)</option>
    <option value="Positivo">Computador (Ultratop Positivo)</option>
    <option value="Roteador">Roteador</option>
    <option value="Switch">Switch</option>
  </select>
  <label class="smart-placeholder" for="enquiry-type">
    Tipo de equipamento.
  </label>
</fieldset>

<!-- Adicionei as divs de conteúdo com seus respectivos `values` como atributo de `data-id` -->
<div data-id="padrao">Selecione um equipamento</div>
<div data-id="Switch">conteúdo que você quiser para Switch</div>
<div data-id="Roteador">conteúdo que você quiser para  Roteador</div>
<div data-id="Positivo"> conteúdo que você quiser para  Positivo</div>
<div data-id="DELL">conteúdo que você quiser para DELL</div>
<div data-id="PC">conteúdo que você quiser para PC</div>

1
  • Boa noite, cara seu codigo e sua explicação me ajudou muito mas Utilizei o seu codigo mas ele fica mostrando as opção no meu, ele não esconde as data-id não sei se errei algo ainda mas nao apresenta o mesmo resultado que o seu apresentou
    – FKneto
    Commented 2/08/2022 às 23:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .