Publicado em 2 de set.

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

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

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

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Maujor· 2 de set.

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· 2 de set.

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· 2 de set.

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· 2 de set.

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

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

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

	<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· 2 de set.

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