Por Eugenia Bahit
16.1 Exemplos de aplicação
Trabalhando com a propriedade disabled
Veremos o caso em que um usuário deve escolher um produto de uma lista e a quantidade que deseja comprar, de outra lista. Porém, este último, só poderá fazê-lo, se já selecionou um produto.
O Script...
<script language="javascript">
function habilitar(form)
{
if (form.produtos[0].selected == true)
{
form.quantidade.disabled = true;
}
else
{
form.quantidade.disabled = false;
}
}
</script>
O formulário...
<form name="exemplo1" method="POST" target="_blank" action="pagina.htm">
<select name="produtos" onChange="habilitar(this.form)">
<option value="">[Selecione um produto]</option>
<option value="COD 001">COD 001: Produto 1</option>
<option value="COD 002">COD 002: Produto 2</option>
<option value="COD 003">COD 003: Produto 3</option>
</select>
<select name="quantidade" disabled>
<option value="">[quantidade]</option>
<option value="5">5 unidades</option>
<option value="10">10 unidades</option>
<option value="15">15 unidades</option>
</select>
<input type="submit" value="Enviar"></form>
Os resultados...
Trabalhando com o construtor new Option
Mediante este exemplo, se gerarão distintas opções na segunda lista dependendo da opção escolhida na primeira.
O Script...
<script language="javascript">
function agregarOpcoes(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;
if (selec[0].selected == true)
{
var selecionar = new Option("<-- esperando
seleção","","","");
combo[0] = selecionar;
}
if (selec[1].selected == true)
{
var popular1 = new Option("Rock dos 90","Rock1","","");
var popular2 = new Option("Rock dos 80","Rock2","","");
combo[0] = popular1;
combo[1] = popular2;
}
if (selec[2].selected == true)
{
var academica1 = new Option("Música Barroca","Barroca","","");
var academica2 = new Option("Música do Século XX","Século XX","","");
var academica3 = new Option("Música Romântica","Romântica","","");
combo[0] = acadêmica1;
combo[1] = acadêmica2;
combo[2] = acadêmica3;
}
}
</script>
O formulário...
<form name="exemplo2" method="POST" target="_blank" action="pagina.htm">
<select name="tipos" onChange="agregarOpções(this.form)">
<option value="">[selecione uma opção]</option>
<option value="musicapopular">Música Popular (Rock)</option>
<option value="musicaacademica">Música Acadêmica</option>
</select>
<select name="estilo">
<option value=""><-- esperando seleção</option>
</select>
<input type="submit" value="Enviar"></form>
Os resultados...
Validar um select
Como nos dois exemplos anteriores, vimos que existem opções que tem um valor nulo (value=""). Supõe-se que esse tipo de opção, não deve ser enviado em um formulário, já que não tem esse valor. Este exemplo, verificará que a opção escolhida, seja uma opção válida.
O script...
<script languaje="javascript">
function validar(form)
{
if (form.combo1.options[form.combo1.selectedIndex].value == "")
{
alert("Por favor, selecione uma opção válida");
form.combo1.focus(); return true;
}
form.submit();
}
</script>
O formulário...
<form name="exemplo3" method="POST" target="_blank" action="pagina.htm">
<select name="combo1">
<option value=" ">[selecione uma opção]</option>
<option value="opcao1">Opção 1</option>
<option value="opcao2">Opção 2</option>
<option value="opcao3">Opção 3</option>
</select>
<input type="button" value="Enviar" onClick="validar(this.form)">
</form>
Os resultados...
Modificar a propriedade text de um option
Por algum motivo, pode ser interessante modificar o texto de um option. Aqui veremos um exemplo de como fazer.
O Script...
<script languaje="javascript">
function modificarTexto(form)
{
var selec = form.opcoes.options;
if (select[0].selected == true)
{ selec[0].text = "Esta não é uma opção válida"; form.opcoes.focus(); }
else {
select[form.opcoes.selectedIndex].text = "Pressione o botão enviar"; }
}
</script>
O formulário...
<form name="exemplo4" method="POST" target="_blank" action="pagina.htm">
<select name="opcoes" onChange="modificarTexto(this.form)">
<option value=" ">[selecione uma opção]</option>
<option value="opcao1">Opção 1</option>
<option value="opcao2">Opção 2</option>
<option value="opcao3">Opção 3</option>
</select>
<input type="submit" value="Enviar">
</form>
Os resultados...
2 comentários revisados: | Erro no script de exemplo Por: alex_dtp | 20/1/09 |
| Trabalhando com o construtor New Option Por: danieljanzen | 07/4/09 |
