Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gleidsonb12

Desabilitar option de um select se o for selecionado em outro select

Recommended Posts

Estou com o seguinte problema, tenho 5 select que contem 12 options cada, sendo esses os meses do ano, em que a pessoa deve escolher cinco opções de meses de férias, mas eu não quero que a pessoa tenha como opção no segundo select um option que ele já escolheu no primeiro, para que não hajam meses repetidos na escolha.

 

Resumindo: se no primeiro select a pessoa escolher janeiro como opção de férias, eu quero que o mês de janeiro fique oculto nos outros quatro selets, e se no segundo select a pessoa escolher, tipo agosto, eu quero que o mês de agosto tb fique oculto no outros três selects ficando oculto então para os outros selects os meses de janeiro e agosto.... e assim por diante.

 

Alguém pode me dar uma luz de como fazer essa validação de formulário com javascript?

 

<!DOCTYPE html>
<html lang="pt-br">
<head> 
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="css/style.css" />
    <title>PLANAF <?php echo $ano+1; ?></title>
</head>
<body>

<form class="form-horizontal" method="post" action="envia_bd.php">
    <fieldset>
        <h1 id="titulo">PLANAF <?php echo $ano+1; ?></h1>

            <div id="identifica" class="alert alert-info">
                <h3><?php echo $postograduacaodousuario." RE ".$reusuario." ".$nomedeguerrausuario; ?></h3>
            </div>

            <div id="boas-vindas" class="alert alert-success">
                <p>Bem vindo!</p>
                <p>Por favor, escolha cinco opções de férias para o ano de <?php echo $ano+1; ?>.</p><br/>
            </div>

            <div id="atencao" class="alert alert-success">
                <h4 style="color: red; text-align: center; text-decoration: underline; margin-top: 10px; font-size: 15pt">OBSERVAÇÕES:</h4>
                <span>1º - Ao clicar no botão Enviar PLANAF <?php echo $ano+1; ?> você será redirecionado para a página de confirmação da opção, devendo imprimir, assinar e entregar na OPM a qual esteja subordinado.</span><br/>
                <span>2º - Lembrando que as opções serão compiladas de acordo com a antiguidade, dentro dos postos e graduação, conforme Almanaque de Oficiais e Praças da PMRO.</span><br/>
                <span>3º - Só clique em enviar PLANAF <?php echo $ano+1; ?> se tiver certeza das suas opções de férias, pois as mesmas não poderão ser alteras por esse canal. Se necessário, procure a Divisão Administrativa do 3º BPM para solicitar a mudança das suas opções de férias.</span>
            </div>

            <div id="center">

            <!-- Select Basic -->
            <div class="form-group">
            <label class="col-md-4 control-label" for="opcao1"></label>
                <select id="opcao1" name="opcao1" class="form-control">
                    <option disabled value="0" selected>Qual a sua 1ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <!-- Select Basic -->
            <div class="form-group">
            <label class="col-md-4 control-label" for="opcao2"></label>
                <select id="opcao2" name="opcao2" class="form-control">
                    <option disabled value="0" selected>Qual a sua 2ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <!-- Select Basic -->
            <div class="form-group">
            <label class="col-md-4 control-label" for="opcao3"></label>
                <select id="opcao3" name="opcao3" class="form-control">
                    <option disabled value="0" selected>Qual a sua 3ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <!-- Select Basic -->
            <div class="form-group">
            <label class="col-md-4 control-label" for="opcao4"></label>
                <select id="opcao4" name="opcao4" class="form-control">
                    <option disabled value="0" selected>Qual a sua 4ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <!-- Select Basic -->
            <div class="form-group">
            <label class="col-md-4 control-label" for="opcao5"></label>
                <select id="opcao5" name="opcao5" class="form-control">
                    <option disabled value="0" selected>Qual a sua 5ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <!-- Button (Double) -->
            <div align="center" class="form-group">
                <div>
                    <button id="envia" name="envia" class="btn btn-success">Enviar PLANAF <?php echo $ano+1; ?></button>
                    <button id="limpa" name="limpa" class="btn btn-danger" type="reset">Limpar</button>
                </div>
            </div>

            </div> <!-- FIM DA DIV CENTER -->



    </fieldset>
</form>

    <div id="btn-relatorio">
        <a href="relatorio.php">Relatório</a>
    </div>

</body>
</html>

 

esses seletos que eu quero validar.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, a tag option aceita o atributo disabled. 

Escrevi um exemplo completamente funcional para você usando o velho e bom JavaScript de raiz sem dependências.

<head> 
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="css/style.css" />
    <title>PLANAF <?php echo $ano+1; ?></title>
    <script>
        /**
        * @author Don Benatti
        */
        
        /**
        Se estiver usando jQuery substitua window.onload por
        jQuery(document).ready(function() {
            ...
        });
        */
        window.onload = function() {
            var selects = document.getElementsByTagName("select");
        
            for (var i = 0; i < selects.length; i++) {
                var select = selects[i];
                
                select.onchange = function() {
                    var val = this.value;
                    
                    for (var i = 0; i < selects.length; i++) {
                        var select = selects[i],
                        
                        options = select.getElementsByTagName("option");
                        
                        for (var o = 0; o < options.length; o++) {
                            var option = options[o];
                            if (option.getAttribute("value") === val) {
                                option.setAttribute("disabled", true);
                            }
                            else {
                                option.removeAttribute("disabled");
                            }
                        }
                    }
                }
            }
        }
    </script>
</head>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Don Benatti, muito obrigado pelo código, ficou muito show, porém, do jeito que está, ele funcionaria perfeitamente se eu tivesse apenas 2 select, mas no meu caso são 5 selects, pois são 5 opções de férias que a pessoa poderá fazer no meu caso, então eu gostaria que o mês que fosse selecionado em qualquer um dos selects ficasse desabilitado nos demais, do jeito que está ele desabilita apenas o ultimo selecionado... se puder me ajudar com essa implementação ficarei muito agradecido, pq só falta essa validação para terminar esse projeto... e de javascript eu sou bem fraco rs... gostei muito do seu código, ficou top... se puder me dar mais essa ajudinha vai ficar 100%...

 

Valeu!

Compartilhar este post


Link para o post
Compartilhar em outros sites
8 horas atrás, gleidsonb12 disse:

gostaria que o mês que fosse selecionado em qualquer um dos selects ficasse desabilitado nos demais

Ele desabilita em todos não apenas no último, como você implementou isso ai?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então @Don Benatti, eu implementei assim:

 

<?php

include "../menu/menunovo.php";

$ano = date("Y");
session_start();
$reusuario = $_SESSION['usuarioId'];
$postograduacaodousuario = $_SESSION['usuarioPostoGraduacao'];
$nomedeguerrausuario = $_SESSION['usuarioNome'];

?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>PLANAF <?php echo $ano+1; ?></title>
    <script>
        /**
        * @author Don Benatti
        */
        
        /**
        Se estiver usando jQuery substitua window.onload por
        jQuery(document).ready(function() {
            ...
        });
        */
        window.onload = function() {
            var selects = document.getElementsByTagName("select");

            for (var i = 0; i < selects.length; i++) {
                var select = selects[i];

                select.onchange = function() {
                    var val = this.value;

                    for (var i = 0; i < selects.length; i++) {
                        var select = selects[i],

                            options = select.getElementsByTagName("option");

                        for (var o = 0; o < options.length; o++) {
                            var option = options[o];
                            if (option.getAttribute("value") === val) {
                                option.setAttribute("disabled", true);
                            }
                            else {
                                option.removeAttribute("disabled");
                            }
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<h1 id="titulo">PLANAF <?php echo $ano+1; ?></h1>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <div id="identifica">
                <h3><?php echo $postograduacaodousuario." RE ".$reusuario." ".$nomedeguerrausuario; ?></h3>
            </div>

            <div id="boas-vindas" class="alert alert-success">
                <h4>BEM VINDO!</h4>
                <p>Por favor, escolha cinco opções de férias para o ano de <?php echo $ano+1; ?>.</p><br/>
            </div>

        <form class="form-horizontal" method="post" action="envia_bd.php">
        <fieldset>

            <div id="atencao" class="alert alert-success">
                <h4>OBSERVAÇÕES:</h4>
                <span>1º - Ao clicar no botão Enviar PLANAF <?php echo $ano+1; ?> você será redirecionado para a página de confirmação da opção, devendo imprimir, assinar e entregar na OPM a qual esteja subordinado.</span><br/>
                <span>2º - Lembrando que as opções serão compiladas de acordo com a antiguidade, dentro dos postos e graduação, conforme Almanaque de Oficiais e Praças da PMRO.</span><br/>
                <span>3º - Só clique em enviar PLANAF <?php echo $ano+1; ?> se tiver certeza das suas opções de férias, pois as mesmas não poderão ser alteras por esse canal. Se necessário, procure a Divisão Administrativa do 3º BPM para solicitar a mudança das suas opções de férias.</span>
            </div>

        </div>

        <div class="col-md-6 col-md-offset-3">

            <div class="form-group">
                <label class="col-md-4 control-label" for="opcao1"></label>
                <select id="opcao1" name="opcao1" class="form-control">
                    <option disabled value="0" selected>Qual a sua 1ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="opcao2"></label>
                <select id="opcao2" name="opcao2" class="form-control">
                    <option disabled value="0" selected>Qual a sua 2ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="opcao3"></label>
                <select id="opcao3" name="opcao3" class="form-control">
                    <option disabled value="0" selected>Qual a sua 3ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="opcao4"></label>
                <select id="opcao4" name="opcao4" class="form-control">
                    <option disabled value="0" selected>Qual a sua 4ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="opcao5"></label>
                <select id="opcao5" name="opcao5" class="form-control">
                    <option disabled value="0" selected>Qual a sua 5ª opção de férias ?</option>
                    <option value="JANEIRO">JANEIRO / <?php echo $ano+1; ?></option>
                    <option value="FEVEREIRO">FEVEREIRO / <?php echo $ano+1; ?></option>
                    <option value="MARÇO">MARÇO / <?php echo $ano+1; ?></option>
                    <option value="ABRIL">ABRIL / <?php echo $ano+1; ?></option>
                    <option value="MAIO">MAIO / <?php echo $ano+1; ?></option>
                    <option value="JUNHO">JUNHO / <?php echo $ano+1; ?></option>
                    <option value="JULHO">JULHO / <?php echo $ano+1; ?></option>
                    <option value="AGOSTO">AGOSTO / <?php echo $ano+1; ?></option>
                    <option value="SETEMBRO">SETEMBRO / <?php echo $ano+1; ?></option>
                    <option value="OUTUBRO">OUTUBRO / <?php echo $ano+1; ?></option>
                    <option value="NOVEMBRO">NOVEMBRO / <?php echo $ano+1; ?></option>
                    <option value="DEZEMBRO">DEZEMBRO / <?php echo $ano+1; ?></option>
                </select>
            </div>

            <div align="center" class="form-group">
                <div>
                    <button id="envia" name="envia" class="btn btn-success">Enviar PLANAF <?php echo $ano+1; ?></button>
                    <button id="limpa" name="limpa" class="btn btn-danger" type="reset">Limpar</button>
                </div>
            </div>

        </div> <!-- col md.4 -->
    </div> <!-- col row -->
</div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites
13 horas atrás, gleidsonb12 disse:

eu implementei assim:

 

 

Entendi, deixei o script um pouco mais sofisticado para você, reimplementa por favor:

<script>
    /**
    * @author Don Benatti
    */
    
    /**
    Se estiver usando jQuery substitua window.onload por
    jQuery(document).ready(function() {
        ...
    });
    */
    window.onload = function() {
        var selects = document.getElementsByTagName("select");

        for (var i = 0; i < selects.length; i++) {
            selects[i].onchange = function(e) {
                var val = this.value;

                for (var z = 0; z < selects.length; z++) {
                    var index = Array.prototype.indexOf.call(selects, this);
                    
                    if ((z !== index) && selects[z].value === val) {
                        //alert("Este mês já foi selecionado, por favor, escolha outro!");
                        
                        var options = this.getElementsByTagName("option");

                        for (var o = 0; o < options.length; o++) {
                            if (options[o].selected) {
                                options[o].selected = false;
                            }
                        }
                        
                        options[0].selected = true;
                        
                        return false;
                    }
                }
            }
        }
    }
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nossa ficou perfeito @Don Benatti, muitíssimo obrigado, era exatamente o que eu precisava.

Pra falar a verdade, eu não entendi o seu script muito bem, pq ele realmente ficou muito TOP e avançado... rs...

 

Abusando um pouso do seu auxílio que está sendo formidável @Don Benatti, poderia adicionar uma validação extra nesse formulário? para que o usuário não possa enviar campos em branco, e nem as opções de instrução, que estão desabilitadas ("Qual a sua 1º, 2º ... 5ª opção de férias ?" para o Banco de Dados, que do jeito que está, ele envia um campo em branco para o BD, tipo, se ele quiser fazer apenas uma opção, e eu não quero isso, quero que todos façam 5 opções de férias..

 

Esse é o ultimo ponto a ser implementado no projeto para que eu possa entregá-lo, mas até aqui, sua ajuda está sendo fundamental. 

 

O link da página com o formulário funcionando: http://pmro.com.br/parte/planaf/index.php

 

Mais uma vez, meus agradecimentos e meus parabéns pelo script.

Compartilhar este post


Link para o post
Compartilhar em outros sites

para não enviar campos em branco, coloque o atributo required no campo.

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, gleidsonb12 disse:

Pra falar a verdade, eu não entendi o seu script muito bem, pq ele realmente ficou muito TOP e avançado.

 

Explicando:


Coloco todas as tags select em um array para iterar depois

var selects = document.getElementsByTagName("select");

Digo que quando o select mudar o valor, chamar a função a seguir

selects[i].onchange = function(e) {

 

Salvo o valor atual do select separadamente apenas para clareza, pois não precisava, uma vez que o resto está no mesmo escopo

var val = this.value;


Agora eu procuro em todos os selects se algum já possui o mesmo valor que foi selecionado agora

for (var z = 0; z < selects.length; z++) {

 

Aqui eu preciso da posição do select atual, pois você precisa que a verificação ocorra nos outros

var index = Array.prototype.indexOf.call(selects, this);


Aqui eu verfico se não é o select atual e se o valor selecionado é igual ao do atual

if ((z !== index) && selects[z].value === val) {

 

Agora eu vou desselecionar a tag option selecionada

for (var o = 0; o < options.length; o++) {
    if (options[o].selected) {
        options[o].selected = false;
    }

 

Aqui eu seleciono novamente a primeira padrão
(Qual a sua opção de férias?)

options[0].selected = true;

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caraca @Don Benatti realmente muito sofisticado o script, mas extremamente útil, fez exatamente o que eu precisava. Vou continuar estudando javascript para me aprofundar no assunto pq acho muito interessante e extremamente funcional, principalmente para sistemas que requeiram validações nos formulários... Muito Obrigado pela colaboração... dou por solucionado o meu problema e muito feliz pela colaboração que me foi dispensada... Espero poder em breve contribuir com os amigos do fórum.

 

Ao sr. @Don Benatti, mais uma vez, muito obrigado pela ajuda, meu projeto está terminado agora.

 

Ao sr. @William Bruno, realmente, era só colocar o required no select rs... mas no meu caso, o primeiro select, que estava disabled, enviava o value "0" para o BD, mas ai foi só colocar "" (em branco) que ele passou a exigir o preenchimento do campo... Muito obrigado pela dica..

 

Valeu a todos amigos..

 

Considero o tópico solucionado!

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma pequena dúvida, referente a PEGAR AUTOMATICAMENTE a HORA e alimentar o campo INPUT.
       
      Tenho uma rotina, que estava aparentemente funcionando corretamente, mas agora estou tendo problema.
       
      A rotina, pega a HORA atual e informa automaticamente o INPUT, não estou entendendo porque agora não está mais fazendo.

      Abaixo a rotina.

       
      <div class="col-lg-3"> <label for="cotaHrsinicio">Hora da Abertura<span class="required">*</span></label> <div class="controls"> <input type="time" id="cotaHrsinicio" name="cotaHrsinicio" class="form-control" style="width:100%;" value="" /> <!-- NESSE INPUT A ROTINA INFORMA A DATA ATUAL --> </div> </div>  
       
      function date_time() { var date = new Date(); //var am_pm = "AM"; var hour = date.getHours(); /* if(hour>=12){ am_pm = "PM"; } */ if (hour == 0) { hour = 12; } if(hour<12){ hour = hour - 12; } if(hour>12){ hour + 12; } if(hour<10){ hour = "0"+hour; } var minute = date.getMinutes(); if (minute<10){ minute = "0"+minute; } var sec = date.getSeconds(); if(sec<10){ sec = "0"+sec; } /* *Formato da Hora (h:m:s) * Passar para a Variável: Hora Atual */ var cotaHrsinicio = document.getElementById("cotaHrsinicio").value = hour+":"+minute; }
      Grato,
       
      Cesar

       
    • Por luiz monteiro
      Bom dia.
      Estou precisando formatar um campo de entrada type text somente para numero com a seguinte formatação.
      se menor que 999 mostrar dessa forma mesmo, nesse caso seria para centena.dezena.unidade. Tipo 001 até 009 depois 010 até 099 depois 100 até 999
      de 1.000 até 999.999  mostrar com o ponto, nesse caso seria para milhar.centena.dezena.unidade. Tipo 001.000 até 001.999 e assim por diante.
      de 1.000.000 até 9.999.000, nesse caso seria para milhão.milhar.centena.dezena.unidade. aqui mesma ideia....
      Parecidos com aqueles campos de preço, que ao digitar os zeros ficam a esquerda até o valor atingirem a unidade correspondente.
       
      Tentei adaptar esse que encontrei na net.
      function moeda(a, e, r, t) { let n = "" , h = j = 0 , u = tamanho2 = 0 , l = ajd2 = "" , o = window.Event ? t.which : t.keyCode; if (13 == o || 8 == o) return !0; if (n = String.fromCharCode(o), -1 == "0123456789".indexOf(n)) return !1; for (u = a.value.length, h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++) ; for (l = ""; h < u; h++) -1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h)); if (l += n, 0 == (u = l.length) && (a.value = ""), 1 == u && (a.value = "0" + r + "0" + l), 2 == u && (a.value = "0" + r + l), u > 2) { for (ajd2 = "", j = 0, h = u - 3; h >= 0; h--) 3 == j && (ajd2 += e, j = 0), ajd2 += l.charAt(h), j++; for (a.value = "", tamanho2 = ajd2.length, h = tamanho2 - 1; h >= 0; h--) a.value += ajd2.charAt(h); a.value += r + l.substr(u - 2, u) } return !1 } Mas sem sucesso.
       
      Grato por enquanto.
       
       
       
    • Por Giovanird
      O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
      Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php  tudo vai junto.  Será que isto é possivel?

      Desde já meu muito obrigado!
      <script> function atualiza(){ var url = 'centro.php'; $.get(url, function(dataReturn) { $('#centro').html(dataReturn); }); } setInterval("atualiza()",60000); </script>  

    • Por luiz monteiro
      Bom dia. Eu estou tentando encontrar uma maneira de evitar que após o usuário selecionar, se selecionar, uma imagem, essa seja substituída apenas por outra selecionada. Porém quando o usuário cancela a seleção, o input file remove o arquivo se já foi selecionado anteriormente.
      Essa é a estrutura que estou usando HTML
      form action="#" method="post" name="formulario" id="formulario" enctype="multipart/form-data"
      input type="file" name="file_name[]" br input type="file" name="file_name[]" br button enviar /button /form
      JS PURO
      Peguei esse script em um post aqui do stackoverflow e adaptei
      script type="text/javascript"
      let formulario = document.querySelector("#formulario"); formulario.addEventListener("change", (e)=>{ e.preventDefault(); var file = e.target.files[0]; if (e.target.files.length === 1 && e.target.files !== undefined && e.target.files !== null && file.type.match('image.*')) { console.log("if okay"); } else { //preciso entender o que devo fazer aqui para verificar se há arquivo no DOM desse target caso, o usuário cancele a seleção, para evitar que se há um arquivo no DOM esse permaneça. console.log(file); //CASO O USUÁRIO CANSELA A SELEÇÃO, RETORNA undefined } }); /script
      O if está correto, porém o que falta é o que fazer no else. Agradeço desde já.
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.