Ir ao conteúdo
  • Cadastre-se

Javascript (javascript) OCULTAR e EXIBIR elemento!


Ir à solução Resolvido por washalbano,

Posts recomendados

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?

 

Quando entro na página e seleciono "sim" os dois campos abrem normalmente:

1.png.376f0cef7da2419e76d1fc73b2fbcd10.png

 

Depois que dou F5 na página os dois campos somem e continua no "sim" (eu quero que volte para o não)

2.png.34bf719339a62f233a78a3da9961db27.png

 

Aqui o código HTML:

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

Aqui o código JS:

 

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("");        
    }   
}

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário 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

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!