0

Montei um javascript simples com JQuery para Ocultar e Exibir um campo onde os valores tbem são resetados dependendo da opção escolhida no select, o problema e que quando se entra na tela e seleciona a opção "sim" e depois da F5 na tela o select não reseta e permanece no "sim" e sem mostrar os campos abertos, alguém sabe como resolvo isso?

Obs: Quero que quando a página e recarregada sem salvar os dados o select volte para a opção "não" por padrão.

function verificaSelect(el) {

    let input = $(el).find(":selected").text().toUpperCase();

    if (input === "SIM") {
        $(el).parents(".row:first").find("#ComboAndamento:first").css('display', '');         
    }
    if (input === "NÃO") {
        $(el).parents(".row:first").find("#ComboAndamento:first").css('display', 'none');
        $("#ComboAndamento").find("#DataAndamento").val("");
        $("#ComboAndamento").find("#DetalhesAndamento").val("");        
    }   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                <div class="form-group pmd-textfield col-sm-5">
                    <strong>1.13</strong> Situação do processo
                </div>
            </div>
            <div class="row">
                <div class="form-group pmd-textfield col-md-4 divicolun">
                    <label for="AndamentoSelect" class="control-label cssPerguntas">
                        EM ANDAMENTO
                    </label>
                    <select id="AndamentoSelect" class="form-control" 
                            onchange="verificaSelect(this);">  
                        <option value="não" selected>Não</option>
                        <option value="sim">Sim</option>
                        
                    </select>
                    <div id="ComboAndamento" style="display:none;">
                        <label for="DataAndamento" class="control-label cssPerguntas">
                            Data
                        </label>
                        <input class="form-control" id="DataAndamento" min="1900-01-01" type="date">
                        <label for="DetalhesAndamento" class="control-label cssPerguntas">
                            Detalhamento
                        </label>
                        <input class="form-control" id="DetalhesAndamento" type="text" placeholder="Detalhes...">
                    </div>
                </div>

1
  • aparentemente o maior problema é q o 'sim' está sendo selecionado ao recarregar a página, oque vc pode fazer então é usar o javascript/jquery para selecionar o 'não' sempre q página for recarregada Commented 7/08/2020 às 14:36

1 Resposta 1

0

A melhor solução e mais simples é você usar as Sessões do navegador para guardar os valores em tempo de execução.

Assim se você quiser manter a opção da pessoa também é possível, senão você muda para o vazio, ou 'não' ou 'sim'

Segue abaixo o script, eu testei aqui e funcionou.

Para saber mais sobre a sessionStorage veja: https://developer.mozilla.org/pt-BR/docs/Web/API/Window/sessionStorage

Agora é só se divertir!

            // Depois que a página for carregada executar o script abaixo

        $(function () {
            var AndamentoSelect = $("#AndamentoSelect"); // pega o campo select

            if (sessionStorage.getItem('ComboAndamento')) { // verifica se a variável de sessão ComboAndamento existe
                AndamentoSelect.val(sessionStorage.getItem('ComboAndamento').toLowerCase()); // define o valor para o select
            }
        });

        function verificaSelect(el) {

            var input = $(el).find(":selected").text().toUpperCase();

            sessionStorage.setItem('ComboAndamento', input); // define o valor para a variável de sessão no navegador toda ver que o select for alterado

            if (input === "SIM") {
                $(el).parents(".row:first").find("#ComboAndamento:first").css('display', '');
            }
            if (input === "NÃO") {
                $(el).parents(".row:first").find("#ComboAndamento:first").css('display', 'none');
                $("#ComboAndamento").find("#DataAndamento").val("");
                $("#ComboAndamento").find("#DetalhesAndamento").val("");
            }
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                <div class="form-group pmd-textfield col-sm-5">
                    <strong>1.13</strong> Situação do processo
                </div>
            </div>
            <div class="row">
                <div class="form-group pmd-textfield col-md-4 divicolun">
                    <label for="AndamentoSelect" class="control-label cssPerguntas">
                        EM ANDAMENTO
                    </label>
                    <select id="AndamentoSelect" class="form-control" 
                            onchange="verificaSelect(this);">  
                        <option value="não" selected>Não</option>
                        <option value="sim">Sim</option>
                        
                    </select>
                    <div id="ComboAndamento" style="display:none;">
                        <label for="DataAndamento" class="control-label cssPerguntas">
                            Data
                        </label>
                        <input class="form-control" id="DataAndamento" min="1900-01-01" type="date">
                        <label for="DetalhesAndamento" class="control-label cssPerguntas">
                            Detalhamento
                        </label>
                        <input class="form-control" id="DetalhesAndamento" type="text" placeholder="Detalhes...">
                    </div>
                </div>

Você deve fazer log-in para responder a esta pergunta.