30 setembro 2008

Valores inferiores desabilitados

Faz tempo que não deixo um código aqui nesta página. Estava com saudades mesmo. Então resolvi que hoje vou mostrar como desabilitar uma opção de um select a partir de outro select utilizando uma função Javascript.

Neste caso, uma adição de um compromisso em uma agenda. Eu não posso deixar que meu usuário cadastre o fim de um compromisso, antes do horário inicial.

Temos os seguintes campos:

Hora Inicial:
< select name="hora" id="hora" class="datahora" onchange="habilitaHora(this.value)">
< option value="8:00">8:00< /option>
< option value="9:00">9:00< /option>
< option value="10:00">10:00< /option>
< option value="11:00">11:00< /option>
< option value="12:00">12:00< /option>
< option value="13:00">13:00< /option>
< option value="14:00">14:00< /option>
< option value="15:00">15:00< /option>
< option value="16:00">16:00< /option>
< option value="17:00">17:00< /option>
< /select>

Hora Final:
< select name="hora2" id="hora2" class="datahora">
< option value="8:00">8:00< /option>
< option value="9:00">9:00< /option>
< option value="10:00">10:00< /option>
< option value="11:00">11:00< /option>
< option value="12:00">12:00< /option>
< option value="13:00">13:00< /option>
< option value="14:00">14:00< /option>
< option value="15:00">15:00< /option>
< option value="16:00">16:00< /option>
< option value="17:00">17:00< /option>
< /select>


É claro que você poderá montar seus próprios valores, mas usarei este mais fácil para focarmos o código a seguir, um javascript totalmente comentado, que deixa habilitado no "hora2", somente os horários posteriores ao do selecionado em "hora".



function habilitaHora(horaAtual){
horario = document.getElementById('hora2'); // SETA A VARIAVEL horario COM O OBJETO hora2 UTILIZANDO O ID

marcado = false; // IREMOS UTILIZAR ESTA VARIAVEL POSTERIORMENTE

// ESTE FOR VAI PERCORRER TODOS OS VALORES DA hora2
for(i=0;i<=horario.options.length;i++){

// ESTE IF VERIFICA SE O VALOR SELECIONADO NO PRIMEIRO COMBO É
// MENOR OU IGUAL AO ITEM DO SEGUNDO
if(horario.options[i].value <= horaAtual){

// SE O VALOR FOR MENOR, A OPÇÃO É DESABILITADA
horario.options[i].disabled = true;
}else{

// SE O VALOR FOR MAIOR, A OPÇÃO É HABILITADA
// FAÇO ESTA VERIFICAÇÃO NOVAMENTE CASO O USUÁRIO MUDE DE
// OPNIÃO E ESCOLHA UM HORÁRIO MENOR
horario.options[i].disabled = false;
// SE A VARIAVEL MARCADO FOR FALSA QUER DIZER QUE É O PRIMEIRO VALOR
// QUE PODE SER MARCADO PELO USUÁRIO. ENTÃO EU JOGO O FOCO PARA ELE
// E A VARIAVEL MARCADO PARA VERDADEIRO
if(marcado == false){
horario.options[i].selected = true;
marcado = true;}
}
}}


Obs.: Eu não testei no IE6.

Não sei se consegui explicar claramente então estou aberto a comentários e e-mails, fiquem à vontade. Abraço a todos.

Um comentário:

  1. henrique, acabei de add vc e já estou dando serviço ... rsrs ... indiquei vc prum meme. acho que vc vai gostar de cumprir. entra no meu rebloggando pra buscar orientação. beijo.

    ResponderExcluir