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>