Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biel.

pupular select

Recommended Posts

Boa noite a todos. Direto ao ponto. Pessoal no EX 1 abaixo, estou tentando obter o seguinte resultado:

 

ao selecionar o item camisas, gostaria que o select secundario exibisse na tela este resultado 

select secundário
<select name="tamanho" required>
  <option value="camisa_tamanho_unico">Camisa_Tamanho_Unico</option>
</select>

ou ao selecionar o item blusas, gostaria que o select secundario exibisse na tela este resultado 

select secundário
<select name="tamanho"  required>
  <option value="blusa_tamanho_unico">Blusa_Tamanho_Unico</option>
</select>

ou ao selecionar o item bermudas, gostaria que o select secundario exibisse na tela este resultado

select secundário
<select name="tamanho"  required>
    <option value=""></option>
    <option value="bermuda_p">Bermuda_P</option>
    <option value="bermuda_m">Bermuda_M</option>
</select>

EX 1

<script>
	if(selectPrincipal.value == "camisas"){
		var a = ["camisa_tamanho_unico|Camisa_Tamanho_Unico"];
	} 
//----------------------------------------------------------
	if(selectPrincipal.value == "blusas"){
		var a = ["blusa_tamanho_unico|Blusa_Tamanho_Unico"];
	}
//----------------------------------------------------------
	if(selectPrincipal.value == "bermudas"){
		var a = ["|" , "bermuda_p|Bermuda_P" , "bermuda_b|Bermuda_M" ];
	} 	
//=================================================================	

</script>

<form action="foi.php">
selectPrincipal
<select name="comprou"  required >
  <option value=""></option>
  <option value="camisas">camisas</option>
  <option value="blusas">blusas</option>
  <option value="bermudas">bermudas</option>
</select>

<br><br>

select_secundario:
<select name="tamanho" required>
</select>
<br><br>
<input type="submit" value="Salvar">
</form>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá. Fiz este exemplo para você. Se quiser acrescentar algum item é só acrescentar valores na respectiva variável. E caso adicione algum item no select primário (exemplo: calças), adicione uma variável do tipo array com seus respectivos itens e nomeie esta variável seguindo a sequência que você encontra no código.

 

Estou usando Jquery.

 

Live demo:

http://codepen.io/Eziquiel/pen/QpgJoL?editors=0010

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eziquiel, funcionou muito bem. Obrigado!

 

Um detalhe: Você vez tudo isso na mão ou dinamicamente, através de algum site online ou quem sabe até um programa que gera o resultado que buscamos obter? Se for tudo na mão parabéns, se não for tudo na mão, parabéns da mesma forma, afinal você resolveu o que eu buscava obter .

 

Gostaria de saber se você conhece algum site ou programa que mostre o script gerado quando queremos obter um determinado resultado com checkbox, radio, input select, textarea etc . A ideia é estudar o código para saber como a coisa funciona. Obrigado. Aguardo resposta.

Compartilhar este post


Link para o post
Compartilhar em outros sites

De nada, companheiro. Fiz na mão mesmo.

Não conheço nenhum site deste tipo. 

 

Se quiser entender alguma parte do código pode perguntar.

 

Abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Biel, pq não estudar os eventos do JS?! Pensar é dificil neh?

Bora lá q eu ajudo.

 

Vamos utilizar o seu post/pergunta por exemplo...

 

Citar

ao selecionar o item camisas, gostaria que o select secundario exibisse na tela este resultado 

 

Abstraindo enxergo duas etapas. (Monitorar a mudança X e efetuar uma ação Y.)

1 - 'Uma Leitura de mudança '

2 - 'Uma  Ação'

 

A propósito 'change' -> Em inglês significa mudança    (o 0)

 

Etapa 1 - Mudança X: (Monitorar mudança)

document.getElementById("roupas").addEventListener('change', function() {
    //Tudo que escrever aqui é logo após o select id="roupas" sofrer alteração vai ser executado.
    alert(this.value);
});

Live Demo do exemplo acima: (Ele simplemente efetua um alert do value)

https://fiddle.jshell.net/mLpo76px/

----------

 

Ação Y ('exibisse na tela este resultado', popular um select por exemplo...)

Temos um select vazio, e um botão. nesse botão agora vamos monitorar o evento 'CLICK' dele...

Após o click ser efetuado, vamos armazenar o Node(Nó) da tag <select>, e inserir primeiramente um option.... (Camisa verde) com value 'verde_p' 

E depois outro (Camisa Azul (M)) com value 'verde_m'


 

<select name="camisas" id="camisas"></select>

<br />

<button id="popularSelect">Popular Camisas</button>

<script type="text/javascript">
	document.getElementById("popularSelect").addEventListener('click', function() {
	
		var selectCamisas = document.getElementById("camisas");
	
	
		var option = document.createElement("option");
		option.text = 'Camisa Verde (P)';
		option.value = 'verde_p';
		
		//Insere no Select(uf) a Option
		selectCamisas.appendChild(option);
		
		var option = document.createElement("option");
		option.text = 'Camisa Azul (M)';
		option.value = 'verde_m';
		
		//Insere no Select(uf) a Option
		selectCamisas.appendChild(option);
	});
</script>

Live demo do exemplo acima:

https://fiddle.jshell.net/3uujfbac/

 

 

 

E por fim vamos juntar os dois legos...

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<select name="roupas" id="roupas">
	<option value="">-- Selecione --</option>
	<option value="camisas">Camisas</option>
	<option value="blusas">Blusas</option>
	<option value="bermudas">Bermudas</option>
</select>

<hr />
<select name="sub_select" id="sub-select">
	

</select>


<script type="text/javascript">

	document.getElementById("roupas").addEventListener('change', function() {
		var roupaSelecionada = this.value;
		
		var selectCamisas = document.getElementById("sub-select");
		
		//Remove todas Opts anteriores...
		while (selectCamisas.firstChild) {
			selectCamisas.removeChild(selectCamisas.firstChild);
		}
	

		//Já q temos um padrão... vem sempre um array com o ['value|text', 'value|text']
		//Vamos usar ele...
		switch(roupaSelecionada){
			case 'camisas':
				var dados = ["camisa_tamanho_unico|Camisa Tamanho Unico"];
			break
			
			case 'blusas':
				var dados = ["blusa_tamanho_unico|Blusa Tamanho Unico"];
			break;
			
			case 'bermudas':
				var dados = ["bermuda_p|Bermuda P" , "bermuda_m|Bermuda M" ];
			break;
		}
		
		//Vamos percorrer todos os elementos do array com o loop
		for(x in dados){
			//dar um alias para o elemento percorrido atual.
			var item = dados[x];
			
			//E 'Separar' a string pelo caracter '|' (Pipe)
			// Ex:
			// "bermuda_p|Bermuda_P" -> [0 -> 'bermuda_p', 1 -> Bermuda_P]
			var auxSelect = item.split('|'); 
			
			var option = document.createElement("option");
			option.value = auxSelect[0];
			option.text = auxSelect[1]; 
			selectCamisas.appendChild(option);
		}
	});
</script>
</body>
</html>

Live Demo:

https://fiddle.jshell.net/vp338a8s/1/

 

 

Considerações finais:

Recomendo fortemente que faça os execicios:

https://github.com/gabrieldarezzo/helpjs-ravi#exercicios-em-javascript

 

Letura:

http://tableless.github.io/iniciantes/manual/html/

 

Leitura(2):

http://tableless.github.io/iniciantes/manual/js/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado a todos. Eziquiel e GabrielDarezzo muito obrigado. Funcionou muito bem. 

GabrielDarezzo Obrigado pela sugestão e sites sugeridos. 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Biel.
      Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento  o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ?
      <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>  
    • Por Biel.
      Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>  
    • Por Biel.
      Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>  
       
    • Por Biel.
      Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>  
    • Por Biel.
      Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a  e não do javascript . Como resolver? 
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido,  Obrigado a todos !
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.