Desabilitando opções de um select dinâmicamente
Várias vezes precisamos utilizar uma opção dependente de outra opção, principalmente quando a interação com o usuário é extensa. Hoje vamos mostrar como desabilitar a opção de um select a partir de um outro select, utilizando apenas uma função Javascript simples.
A situação a seguir mostra a adição de um compromisso em uma agenda. Eu não posso deixar que o usuário cadastre o fim de um compromisso, antes de cadastrar o horário inicial.
Teremos o seguinte:
Hora Inicial: <select name="hora" id="hora" onchange="habilitaHora(this.value)" class="datahora" type="select-one" value="8:00"> <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" type="select-one" value="8:00"> <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){
// SETA A VARIAVEL horario COM O OBJETO hora2 UTILIZANDO O ID
horario = document.getElementById('hora2');
// IREMOS UTILIZAR ESTA VARIAVEL POSTERIORMENTE
marcado = false;
// 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;
}
}
}
}
Não sei se consegui explicar claramente então estou aberto a comentários e e-mails, fiquem à vontade. Abraço a todos.
Estou montando uma tabela de horario (escala de trabalho),
encontrei uma dificuldade de desabilitar mais de uma opção, isso ainda não consegui, e também efetivar a desabilitação de opção do horário em mais de um funcionário.
Até o momento só consegui desabilitar o horário selecionado por um funcionário a todos os outros funcionários, mas quando coloco um outro funcionário (um segundo horário) não desabilita, o que fazer?
Olha o código:
Bem, não sei até o momento como desabilitar dois horários sendo cada funcionário em um.
Antônio,
Você está no caminho certo.
Só analise melhor o código e conseguirá!
Envie grandes trechos de código por e-mail por favor.
Até mais
tenho um formulario onde aparecem as seguintes informacoes dentro de um select
DIV1 9H
DIV 2 10H
gostaria de saber como faço para que as 9 horas a div 1 pare de aparecer no formulario e as 10 horas aconteca a mesma coisa com a div 2, e que ela nao seja mostrada depois deste horario no mesmo dia