Jump to content
T-Rexz

Div some após selecionar uma opção de seleção

Recommended Posts

O negócio é o seguinte: estou criando apenas um arquivo html bem simples e básico para os atendentes utilizarem para agilizar o serviço deles em vez de inserir manualmente. Então, estou com uma dificuldade para tentar achar o problema que está ocasionando o div sumir após selecionar a segunda opção para baixo (tenta selecionar Beltrano ou Carlitos) na seleção, apenas a primeira opção Fulano está funcionando (outro detalhe: no outro arquivo que tenho segue a mesma lógica, mas é arquivo teste apenas e funciona de escolher qualquer uma das opções normalmente, mesmo sendo um arquivo-teste). Veja o código abaixo e me diz onde tá o erro que está causando??

PS: estou utilizando o Chrome apenas, a pedido da empresa.

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>SCRIPTS - RECEPÇÃO</title>
<style type="text/css">
    .carimboExecutador{
		background: #ff0000;
	}	
	.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }

</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});

  function copiarTexto5() {
    var textoCopiado5 = document.getElementById("link5");
    textoCopiado5.select();
    document.execCommand("Copy");
  }

  <!-- function copiarTexto() { -->
    <!-- var textoCopiado = document.getElementById("link"); -->
    <!-- textoCopiado.select(); -->
    <!-- document.execCommand("Copy"); -->
  <!-- } -->
 
function selecionaAtendente()
{
	var puxa = $( "#listaAtendente" ).val();
	var str = document.getElementById("link5").value; 
	var n = str.replace(/XX|FULANO|BELTRANO|CARLITOS/gi,puxa);
	document.getElementById("link5").value=n;
}

</script>
</head>
<body>
<!-- DIV PARA EXIBIR LISTA DE OPÇÕES -->
    <div>
		<h4><font face="arial" color="red">ESCOLHA A SCRIPT:</font></h2>
        <select>
			<option disabled selected>Clique aqui para exibir a lista</option>
			<option disabled></option>
			<option value="carimboExecutador">Carimbo - Identificação Executador</option>
        </select>
    </div>
    
<!-- CLASSES PARA EXIBIR DIVS SELECIONADOS -->

    <div class="carimboExecutador box">
		<h2><font face="arial" color="white">CARIMBO - IDENTIFICAÇÃO EXECUTADOR</font></h2>
<b><font face="arial" color="white">Selecione o Responsável:</font></b> <select id="listaAtendente">
    <option value="FULANO">Fulano</option>
	<option value="BELTRANO">Beltrano</option>
	<option value="CARLITOS">Carlitos</option>
</select>
<button onclick="selecionaAtendente()">Preencher Técnico</button>		
		<br/><textarea rows="4" cols="90" id="link5" name="link5" readonly>
NOME: XX
CARGO: ATENDENTE DE TELEMARKETING
</textarea>
<br/><button onClick="copiarTexto5()">Copiar Texto</button>
</div>

</body>
</html>
Edited by T-Rexz
Correção no código-fonte

Share this post


Link to post
Share on other sites

1-) Retire a seguinte linha do seu script:

$(".box").not("." + optionValue).hide();

2-) A declaração .change(); não produz qualquer efeito

3-) Comentários em JavaScript usam os seguinte símbolos:
// para comentar linhas
/*   blocos  */  para comentar blocos de código

Você usou indevidamente <!--   -->

Share this post


Link to post
Share on other sites
51 minutos atrás, Maujor disse:

1-) Retire a seguinte linha do seu script:


$(".box").not("." + optionValue).hide();

2-) A declaração .change(); não produz qualquer efeito

3-) Comentários em JavaScript usam os seguinte símbolos:
// para comentar linhas
/*   blocos  */  para comentar blocos de código

Você usou indevidamente <!--   -->

 

1) Retirei a linha citada e deu certo aparentemente (ainda tenho que retirar no arquivo final e testar EDIT: veja o edit mais abaixo)... então, deixa eu entender esta linha de comando: este .not junto com .hide significa que se houver optionValue, ele vai negar a opção de seleção (.not), que irá ocultar a div com .hide se a pessoa mudar algo na seleção, é isso?

2-) Entendi... removi a declaração que está lá à toa, valeu!!

3-) Tô ciente nisso... é que tô usando o notepad++ e não sei qual é o comando que aplique o /*   */ diretamente, pois estou acostumando a fazer a seleção e depois aplicar o comando (CTRL+K) que gera o <!--   -->. Então, qual comando seria para aplicar o /* */ no notepad++ ou terei que fazer isso manualmente?

 

@Maujor

 

Fiz o teste com o arquivo final e não deu certo, pois dps que retirei a linha citada, as divs selecionadas aparecem em vez de uma só div por vez. Já já te passarei uma script de demonstração com 3 seleções para tu entender.

Edited by T-Rexz
Relatando novo problema após alterações.

Share this post


Link to post
Share on other sites
24 minutos atrás, Maujor disse:

Aguardo!

 

 

Segue o código-fonte abaixo (só botei 3 opções, pois o arquivo completo tem mais de 10, mas todos seguem o mesmo conceito), lembrando-se que eu coloquei // nas linhas que você pediu para retirar ou q não fazem sentido, mas estão lá para em caso de necessidade, ok:

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>SCRIPTS - EXEMPLO</title>
<style type="text/css">
	.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .carimboExecutador { background: #ff0000; }	
	.relatoInstala { background: #ff0000; }	
	.relatoReparo { background: #ff0000; }

</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                //$(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    });//.change();
});

  function copiarTexto5() {
    var textoCopiado5 = document.getElementById("link5");
    textoCopiado5.select();
    document.execCommand("Copy");
  }

  function copiarTexto6() {
    var textoCopiado6 = document.getElementById("link6");
    textoCopiado6.select();
    document.execCommand("Copy");
  }

  function copiarTexto7() {
    var textoCopiado7 = document.getElementById("link7");
    textoCopiado7.select();
    document.execCommand("Copy");
  }

  function reset6() {
    var link6 = document.getElementById('link6');
    if (!link6.value || link6.value != link6.defaultValue && confirm('Restaurar o conteúdo original?')) {
        link6.value = link6.defaultValue;
    }
  }

  function reset7() {
    var link7 = document.getElementById('link7');
    if (!link7.value || link7.value != link7.defaultValue && confirm('Restaurar o conteúdo original?')) {
        link7.value = link7.defaultValue;
    }
  }

 
function selecionaAtendente()
{
	var puxa = $( "#listaAtendente" ).val();
	var str = document.getElementById("link5").value; 
	var n = str.replace(/XX|FULANO|BELTRANO|CARLITOS/gi,puxa);
	document.getElementById("link5").value=n;
}

function selecionaTecnico()
{
	var puxa = $( "#listaTecnico" ).val();
	var str = document.getElementById("link6").value; 
	var n = str.replace(/XX|FILIPE MENDES|TARCISIO ATHILA|JUELMO LOPEZ/gi,puxa);
	document.getElementById("link6").value=n;
}

function selecionaRecepcionista()
{
	var puxa = $( "#listaRecepcionista" ).val();
	var str = document.getElementById("link7").value; 
	var n = str.replace(/XX|PELÉ|ALLEJO|ROMÁRIO/gi,puxa);
	document.getElementById("link7").value=n;
}

</script>
</head>
<body>
<!-- DIV PARA EXIBIR LISTA DE OPÇÕES -->
    <div>
		<h4><font face="arial" color="red">ESCOLHA A SCRIPT:</font></h2>
        <select>
			<option disabled selected>Clique aqui para exibir a lista</option>
			<option disabled></option>
			<option value="carimboExecutador">Carimbo - Identificação Executador</option>
			<option value="relatoInstala">Relato - Instalação</option>
			<option value="relatoReparo">Relato - Reparo via S.A.C. Presencial</option>
        </select>
    </div>
    
<!-- OPÇÃO 1 -->

    <div class="carimboExecutador box">
		<h2><font face="arial" color="white">CARIMBO - IDENTIFICAÇÃO EXECUTADOR</font></h2>
<b><font face="arial" color="white">Selecione o Responsável:</font></b> <select id="listaAtendente">
    <option value="FULANO">Fulano</option>
	<option value="BELTRANO">Beltrano</option>
	<option value="CARLITOS">Carlitos</option>
</select>
<button onclick="selecionaAtendente()">Preencher Atendente</button>		
		<br/><textarea rows="4" cols="90" id="link5" name="link5" readonly>
NOME: XX
CARGO: ATENDENTE DE TELEMARKETING
</textarea>
<br/><button onClick="copiarTexto5()">Copiar Texto</button>
</div>

<!-- OPÇÃO 2 -->	
	
	<div class="relatoInstala box">
		<h2><font face="arial" color="white">CERTIFICAÇÃO - INSTALAÇÃO</h2>
<br/>
Selecione o Técnico: <select id="listaTecnico">
	<option value="FILIPE MENDES">FILIPE MENDES</option>
	<option value="TARCISIO ATHILA">TARCISIO ATHILA</option>
	<option value="JUELMO LOPEZ">JUELMO LOPEZ</option>
</select>
<button onclick="selecionaTecnico()">Preencher Técnico</button>		
		</font><input type="button" value="Resetar Conteúdo" onclick="reset6();"><br/>
		<textarea rows="8" cols="80" id="link6" name="link6" >
NOME XX - CARGO: TÉCNICO
1- Sr/Sra está conseguindo utilizar a internet nesse momento? SIM NÃO
2- Foi necessário o técnico subir no telhado? SIM NÃO
3- Observou se quebrou alguma telha? SIM NÃO
4- Em relação à velocidade, o técnico fez os testes e
mostrou que está chegando à velocidade contratada? SIM NÃO
5- Ficou alguma dúvida referente ao serviço realizado? SIM NÃO
</textarea>
<br/><button onClick="copiarTexto6()">Copiar Texto</button>
</div>

<!-- OPÇÃO 3 -->
	
	<div class="relatoReparo box">
		<h2><font face="arial" color="white">CERTIFICAÇÃO - REPARO</h2>
<br/>
Selecione o Técnico: <select id="listaRecepcionista">
	<option value="PELÉ">PELÉ</option>
	<option value="ALLEJO">ALLEJO</option>
	<option value="ROMÁRIO">ROMÁRIO</option>
</select>
<button onclick="selecionaRecepcionista()">Preencher Recepcionista</button>		
		</font><input type="button" value="Resetar Conteúdo" onclick="reset7();"><br/>
		<textarea rows="8" cols="80" id="link7" name="link7" >
NOME XX - RECEPÇÃO
1- Resolução de problema relatado pelo Cliente nº XXXX foi resolvido? SIM NÃO
2- Foi emitido recibo para este cliente? SIM NÃO
3- Teve movimentação de estoque para este cliente? SIM NÃO
</textarea>
<br/><button onClick="copiarTexto7()">Copiar Texto</button>
</div>

</body>
</html>

 

Edited by T-Rexz
Orientação

Share this post


Link to post
Share on other sites

Nesse caso simplifique:
1-) Na marcação HTML atribua um ID para o select dos scripts:

<select id="escolha-script">
  <option disabled selected>Clique aqui para exibir a lista</option>
  <option disabled></option>
  ...

 

2-) Use esse script

$(document).ready(function(){ 
  $("#escolha-script").change(function(){ 
    let scriptEscolhido = $(this).val();
    $('.box').hide();
    $('.box' + '.' + scriptEscolhido).show();
  }); 
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
    • By higordiasz
      Boa Tarde,
      Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
       
      Segue meu código CSS responsável pelas div.
       
      .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
       
      <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
       

       
      Alguem sabe oq posso alterar para alinhar elas corretamente ? 
    • By geoleandro
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <div id="dq1"style="display:block"> <br><br> Conteúdo da Div 1 </div> <br><br> <span id = "bdq2" style="display:block" onclick = "divMostrar(2)">Próximo</span><br><br> <div id="dq2"style="display:none"> Conteúdo da Div 2 </div> <br><br> <span id = "bdq3" style="display:none" onclick = "divMostrar(3)">Próximo</span><br><br> <div id="dq3"style="display:none"> Conteúdo da Div 3 </div> <br><br> <span id = "bdq4" style="display:none" onclick = "divMostrar(4)">Próximo</span><br><br> <div id="dq4"style="display:none"> <br><br> Conteúdo da Div 4 </div> <br><br> <span id = "bdq5" style="display:none" onclick = "divMostrar(5)">Próximo</span><br><br> <div id="dq5"style="display:none"> <br><br> Conteúdo da Div 5 </div> <br><br> <span id = "bdq6" style="display:none" onclick = "divMostrar(6)">Próximo</span> <div id="dq6"style="display:none"> Terminou! </div> <script> function divMostrar(qnum){ if (document.getElementById("bdq2").style.display='block'&& qnum==2) { document.getElementById("dq2").style.display='block'; document.getElementById("bdq2").style.display='none'; document.getElementById("bdq3").style.display='block'; } if (document.getElementById("bdq3").style.display='block' && qnum==3){ document.getElementById("bdq3").style.display='none'; document.getElementById("dq3").style.display='block'; document.getElementById("bdq4").style.display='block'; } if (document.getElementById("bdq4").style.display='block' && qnum==4){ document.getElementById("bdq4").style.display='none'; document.getElementById("dq4").style.display='block'; document.getElementById("bdq5").style.display='block'; } if (document.getElementById("bdq5").style.display='block' && qnum==5){ document.getElementById("bdq5").style.display='none'; document.getElementById("dq5").style.display='block'; document.getElementById("bdq6").style.display='block'; } if (document.getElementById("bdq6").style.display='block' && qnum==6){ document.getElementById("bdq6").style.display='none'; document.getElementById("dq6").style.display='block'; } } </script> </body> </head> </html> De que outro modo é possível programar para abrir essas Divs em sequência? Além do uso de IFs e else em JavaScript.
    • By 4Unknow
      Bom dia meus Nobres amigos.
      Seguinte, não sou especialista em HTML, CSS, nem nada.
      Por isso venho humidelmente pedir uma ajudinha. Gostaria de colocar um botão nessa área marcada na imagem abaixo.

      Estou editando essa página abaixo:



      Já tentei de tudo, mexer por tudo, mas o botão não fica certo de jeito maneira.
      Gostaria de uma ajudinha, o botão ou ele fica em cima do texto ou não aparece de jeito algum.

      Vou deixar um link desse site que estou utilizando, se tiver uma alma bondosa e comtempo ai para me ajudar, eu serei eternamente grato.

      LINK: https://www.mediafire.com/file/fe669isyguey0ez/Intro_Viva.rar/file
    • By AlphaPingo
      Olá, sou programador iniciante e tenho uma dúvida que, imagino eu, ser simples, porém não estou conseguindo achar uma solução. Seguinte: no site a seguir, preciso que "Avaliação dos Clientes" e o quadro que a segue, fiquem logo em seguida da imagem do celular (sem aquele espaço em branco entre eles). A primeira "row" possui 3 divs - a com a imagem do celular, a com o nome do modelo, preço, e avaliação com as estrelas e a div com os detalhes do produto - porém, a ultima div, ocupa o dobro do espaço vertical das demais, sendo assim, aumentando o espaço da "row" e deslocando o quadro das avaliações mais para baixo. Eu já tentei colocar a div das avaliações dentro do "row" com as 3 outras divs, porém o que acontece é apenas aumentar o tamanho da "row" de cima, mas continuar o espaço em branco que quero preencher. O que posso fazer? (peço desculpas por qualquer erro em termos técnicos). Segue abaixo as imagens de como esta / como deveria estar e as divisões das divs


×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.