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>

Editado Setembro 2, 2019 por T-Rexz
Correção no código-fonte

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.

Editado Setembro 2, 2019 por T-Rexz
Relatando novo problema após alterações.

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>

Editado Setembro 2, 2019 por T-Rexz
Orientação

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

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

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante