Ir para conteúdo
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>

 

  • +1 1

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?

  • +1 1

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>

 

  • +1 1

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.

  • +1 2

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;

 

  • +1 1

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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Informação importante

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