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

T-Rexz · Setembro 2, 2019

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>

Maujor · Setembro 2, 2019

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 

T-Rexz · Setembro 2, 2019

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.

Maujor · Setembro 2, 2019

3 horas atrás, T-Rexz disse:

Já já te passarei uma script de demonstração com 3 seleções para tu entender.

Aguardo!

T-Rexz · Setembro 2, 2019

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>

Maujor · Setembro 2, 2019

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

Entrar

Arquivado

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

Recommended Posts

T-Rexz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

T-Rexz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

T-Rexz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante