Fazer campo select abrir outro select

[TAKUMA 0]

Olá bom dia.

Estou precisando de uma ajuda pois Javascript não é muito a minha área.

Tenho o código abaixo onde um campo select chama por outro campo select, mas eu preciso de 3 campos selects ou mais, exemplo:

ESTÁ ASSIM:

CAMPO SELECT EMPRESA SONY CHAMA O CAMPO SELECT PRODUTOS TV

PRECISO QUE FIQUE ASSIM:

CAMPOS SELECT EMPRESA SONY CHAMA SELECT PRODUTOS TV QUE CHAMA MODELOS 4K

E ai vai dando andamento como Polegagas...

Segue abaixo o código, já quebrei a cabeça e nada, quem puder ajudar eu agradeço.

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
window.onload = function()
{
	id('empresa').onchange = function()
	{
		id('produto').style.display = this.value==1 ? 'block' : 'none';
	}
}
</script>
  	
  		<select name="empresa" id="empresa" class="input"> 
			<option value="50">SELECIONE A EMPRESA:</option>
			<option value="1">SONY</option> 
		</select> 
		<select name="produto" id="produto" style="display: none;">
			<option>SELECIONE O PRODUTO</option>
			<option value="10" id="TV">TV</option>
		</select>
               

[gabrieldarezzo 255]

A maneira mais 'fácil' é você ter chamadas de ajax.

Ai fica monitorando o evento 'change' do campo select....
Sempre que ocorrer uma alteração você envia o campo selecionado e o retorno do ajax popula dinamicamente o select seguinte.

Exemplo básico:
http://gilbertoalbino.com/criar-combo-dinamico-em-ajax-com-jquery-php/

Ai ao invés da estrutura
Pais -> Estado -> Cidade -> Bairro


Se utiliza a sua ;)

Edit:
Sobre exibir ou não.

Inicialmente deixa como display:none, e conforme vai selecionando você vai abrindo as possibilidades

//Ex....
$( "#empresa" ).bind( "change", function() {
	//Chamada em ajax...
	//popular o $( "#produto" ) 
	
	
	$( "#produto" ).show();
});

Edit2:

Recomendo a leitura sobre JSON, para manipulação dos dados é muito melhor e pratico em JS.

e no php um simples:

//Desde que esteja em UTF-8...
echo json_encode($produtos);

Trafega menos dados na rede um padrão JSON do que um HTML formado hehe

[TAKUMA 0]

Agradeço pela resposta, mas ainda sim é complexo, gostaria de alguma solução para esse próprio código que postei, pois sei que dá para fazer, só não sei como.

Não quero usar BD para isso.

[gabrieldarezzo 255]

O Banco é só uma das opções de INPUT/OUTPUT (entrada/saída).

Você tem esses dados já gerados pelo HTML?

Os <options></options> estão todos lá?

Caso sim, a unica maneira que consigo enxergar para 'esconder' os dados seria percorrendo e armazenando em um array no JS.

Qual a estrutura completa e comportamento que você deseja?

SONY só exiba produtos SONY?

SAMSUNG só exiba produtos SAMSUNG ?

[TAKUMA 0]

Esse código ai que eu postei é só colar ele em um arquivo e subir que você verá como ele funciona, só precisaria que esse javascript me desse a terceira opção com o select, não precisa de PHP e nem SQL, é bem leve, mas não estou conseguindo fazer.

[gabrieldarezzo 255]

Então meu querido, é justamente essa 'terceira opção' que eu quero saber de onde caralhos aparece/vem/surge.

Ele está na pagina assim?

<select name="terceira_opcao" id="terceira_opcao" style="display: none;">
	<option>SELECIONE O a terceira</option>
	<option value="10" id="TV">TV</option>
</select>

[TAKUMA 0]

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
window.onload = function()
{
	id('empresa').onchange = function()
	{
		id('produto').style.display = this.value==1 ? 'block' : 'none';
	}
}
</script>
  	
  		<select name="empresa" id="empresa" class="input"> 
			<option value="50">SELECIONE A EMPRESA:</option>
			<option value="1">SONY</option> 
		</select> 
		<select name="produto" id="produto" style="display: none;">
			<option>SELECIONE O PRODUTO</option>
			<option value="10" id="TV">TV</option>
		</select>

Veja como postei no código...

A pessoa escolha Empresa e seleciona "SONY" automaticamente abrirá o segundo select PRODUTO e ele clicando em algum option como o "TV" teria que ter o terceiro select que seria MODELOS.

A questão é que no "SCRIPT" só temos 2 opções para 2 campos selects homologados.

Ou seja, teria que vir um terceiro campo select ao selecionar "TV"

[gabrieldarezzo 255]

Você continua não informando de onde vem os dados do terceiro campo...

Vou 'supor' que você vai criar dinamicamente pelo JS....

Nesse caso só fazer assim:

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


	<p>Empresa</p>
	<select name="empresa" id="empresa" class="input"> 
		<option value="50">SELECIONE A EMPRESA:</option>
		<option value="1">SONY</option> 
	</select> 

	<p>Produto</p>
	<select name="produto" id="produto" style="display: none;">
		<option>SELECIONE O PRODUTO</option>
		<option value="10">TV</option>
	</select>
	
	


	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$( "#empresa" ).bind( "change", function() {
				if($( this ).val() != 50){
					$( "#produto" ).show();
				} else {
					$( "#produto" ).hide();
				}
			});

			$( "#produto" ).bind( "change", function() {
				
				if($(this ).val() == ''){
					$( "#produto" ).hide();
					return false;
				}
				
				//Cria o select de Resoluções dinamicamente...					
				var resolucoes = [];
				
				resolucoes.push({
					 'id' 	: 1
					,'nome' : '4K'
				});	
				
				resolucoes.push({
					 'id' 	: 2
					,'nome' : 'TUBO'
				});
				
				resolucoes.push({
					 'id' 	: 3
					,'nome' : 'LCD'
				});
				
				var selectResolucao = document.createElement("select");
					
				
				//Percorre todo o Loop de estados
				for(i in resolucoes){
					var resolucao = resolucoes[i];					
					$("<option />", {value: resolucao.id, text: resolucao.nome}).appendTo(selectResolucao);
				}
				
				$('<p id="resolucao">Resolução</p>').insertAfter("#produto");
				$(selectResolucao).insertAfter("#resolucao");
			});
		});
	</script>
</body>
</html>

Live Demo:

https://fiddle.jshell.net/d1ok06tt/

[TAKUMA 0]

CARA VOCÊ É UM GÊNIO!

MUITO OBRIGADO, ME AJUDOU MUITO.

DEUS O ABENÇOE E OBRIGADO A IMASTERS PELA OPORTUNIDADE, TUDO DE BOM!!!

[TAKUMA 0]

Sem querer abusar, saberia como formatar valor no javascript?

<script>
function calcular(){
    var n1 = parseInt(document.getElementById('n1').value, 10);
     document.getElementById('resultado').innerHTML = n1;  
 } 
</script>

<span id="resultado"></span>

Aparece 100000 ao invés de 1.000,00

[gabrieldarezzo 255]

O parseInt() seria para inteiros.

var x = 3; //inteiro
var x = 20; //inteiro
var x = 80; //inteiro

Já o parseFloat seria para valores decimais, porem no padrão gringo

parseFloat('498,45'); // isto vai dar mer... devido a ,  -> 498
parseFloat('498.45'); // retorna ->  498.45

Resumindo, substitui tudo que é virgula por ponto.

utilize o parseFloat para decimais.

E após isso formate da maneira que você quer xD

ps: caso sua duvida tenha sido respondida, favor marcar como 'Resolvido' no botão.

E criar um tópico novo.

'Como formatar valores para JavaScript' na próxima.

[TAKUMA 0]

BLZ, OBRIGADO AMIGO!!!

[gabrieldarezzo 255]

'MELHOR RESPOSTA' COMO A DELE MESMO <_<

[wootzor 103]

'MELHOR RESPOSTA' COMO A DELE MESMO <_<

Não sei se há gente que não percebe o objectivo de escolher a melhor resposta (para além da 'reputação' dada a quem ajudou, facilitam quem procurar resposta para a mesma questão no futuro) ou se simplesmente não querem dar "crédito" a quem ajudou.