h1 pupular select

[Biel. 9]

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>

 

[Eziquiel 96]

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

[Eziquiel 96]

Fiz algumas alterações que não havia me atentado. 

 

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

[Biel. 9]

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.

[Eziquiel 96]

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.

[gabrieldarezzo 255]

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/

[Biel. 9]

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

GabrielDarezzo Obrigado pela sugestão e sites sugeridos.