O exemplo que vemos a seguir é uma variação do anterior artigo Um formulário com campos que se escondem com DHTML, porém desta vez, dependendo da seleção que façamos em um campo select do formulário, mostrará mais ou menos campos ao visitante.

Para isso, criamos uma caixa de seleção dentro do formulário e lhe dizemos que, quando se mude o valor do campo, se execute a função em javascript "expandir_formulario()":

<select size="1" name="pessoas" onchange="expandir_formulario()" >
<option value="0">?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

A função javascript comprovará a seleção que escolhemos e dependendo disso ativará ou desativará as diferentes camadas do formulário.

function expandir_formulario(){
if (document.f1.pessoas.value == "0"){
    xDisplay('camadaexpansao', 'none')
    xDisplay('camadaexpansao2', 'none')
    xDisplay('camadaexpansao3', 'none')
    xDisplay('camadaexpansao4', 'none')
    xDisplay('camadaexpansao5', 'none')
}
if (document.f1.pessoas.value == "1"){
    xDisplay('camadaexpansao', 'block')
    xDisplay('camadaexpansao2', 'none')
    xDisplay('camadaexpansao3', 'none')
    xDisplay('camadaexpansao4', 'none')
    xDisplay('camadaexpansao5', 'none')
}

if (document.f1.pessoas.value == "2"){
    xDisplay('camadaexpansao', 'block')
    xDisplay('camadaexpansao2', 'block')
    xDisplay('camadaexpansao3', 'none')
    xDisplay('camadaexpansao4', 'none')
    xDisplay('camadaexpansao5', 'none')
}
if (document.f1.pessoas.value == "3"){
    xDisplay('camadaexpansao', 'block')
    xDisplay('camadaexpansao2', 'block')
    xDisplay('camadaexpansao3', 'block')
    xDisplay('camadaexpansao4', 'none')
    xDisplay('camadaexpansao5', 'none')
}
if (document.f1.pessoas.value == "4"){
    xDisplay('camadaexpansao', 'block')
    xDisplay('camadaexpansao2', 'block')
    xDisplay('camadaexpansao3', 'block')
    xDisplay('camadaexpansao4', 'block')
    xDisplay('camadaexpansao5', 'none')
}
if (document.f1.pessoas.value == "5"){
    xDisplay('camadaexpansao', 'block')
    xDisplay('camadaexpansao2', 'block')
    xDisplay('camadaexpansao3', 'block')
    xDisplay('camadaexpansao4', 'block')
    xDisplay('camadaexpansao5', 'block')
}
}

Nota: Possivelmente, teria sido mais elegante ter colocado todos os valores dos identificadores das camadas em um array e ter realizado um percorrido pelo array mostrando as camadas ou ocultando-as segundo o índice marcado no select.

Pode-se ver no anterior código que se fez uso de uma função das bibliotecas X Library, chamada xDisplay(). Esta função tem que ser definida no código do programa e para isso incluiremos um script javascript externo que contém o código da função. A procedência deste arquivo também foi explicado no artigo Um formulário com campos que se escondem com DHTML.

<script type='text/javascript' src='formexp.js'></script>

Também necessitaremos um código CSS para definir os estilos iniciais das camadas. Posteriormente, a ativação de cada camada vira dada pelo atributo display da CSS.

<style type="text/css">
#camadainicio{
position:relative;
}

#camadaexpansao{
position:relative;
display:none;

}

#camadaexpansao2{
position:relative;
display:none;

}

#camadaexpansao3{
position:relative;
display:none;

}

#camadaexpansao4{
position:relative;
display:none;

}

#camadaexpansao5{
position:relative;
display:none;

}

#camadafinal{
position:relative;

}
</style>

Esperamos que este exemplo tenha sido simples. Lembramos que as explicações detalhadas já foram oferecidas no artigo anterior que se chama Um formulário com campos que se escondem com DHTML.

Podemos ver o ejemplo em funcionamento.