problem HIDE and DISPLAY Jquery element (error)!

Question

I built a simple javascript with Jquery for Hide and Show a field where the values tbem are reset depending on the option chosen in select, the problem is that when you enter the screen and select the option "yes" and after the F5 on the screen select no reset and stays in the "yes" and without showing the open fields, someone knows how I solve it?

Note: I want that when the page is reloaded without saving the data select it goes back to the option "no" by default.

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>

Answer 1

The best and simplest solution is to use Browser Sessions to save values at runtime.

So if you want to keep the person option is also possible, otherwise you switch to the blank, or 'no' or 'yes'

Below is the script, I tested it here and it worked.

To learn more about the sessionStorage see: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Now just have fun!

            // 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>