Selecionar uma opção em um <select> e carregar dados relaciona

[Jpkun 0]

Bom eu já pesquisei no Google, e tem varias formas de se resolver esse problema, mas eu sou iniciante tanto em php como em javacript,

por que vir aqui então fazer novamente essa pergunta?

 

Bom todos os métodos usam jquery, ajax e json, bom eu só sei que jquery é um framework de js, ajax e json não faço ideia do que seja até então. Apesar de já ter usado json programando para android nas aulas da faculdade.

 

Bom eu tenho duas tabelas: series e season. Conforme eu selecione uma serie, no select season eu gostaria que aparecesse a quantidade de temporadas correspondente. Meu select de series está assim:

<select name="Titulo" id="CmbSerie">
                            <?php
                                $sql = "SELECT * FROM series";
                                $rs = mysql_query($sql);

                                while ($coluna = mysql_fetch_array($rs)) {
                                                                       
                                                                       
                                    $valor = $coluna[Titulo];
                                    echo "<option value='$valor'> $coluna[Titulo] </option>";
                                                                        
                                }
                                                                
                            ?>
                        </select>

Seguinte eu queria saber se tem como vocês me ajudarem a resolver esse problema sem apenas com js puro e php ?

[ESerra 744]

JS puro? É possível, mas deixa e te perguntar, você domina o JS "puro", com certeza não... jQuery para quem é iniciante é muito mais fácil/rápido/simples que o JS "puro", sem falar que em muitos aspectos é mais intuitivo também.

 

Abaixo vou deixar um exemplo do que você quer fazer, usando jQuery e PHP, o json é desnecessário para transacionar os dados.

 

arquivo1.php

<select onchange="carrega(this.value);">
<option value="0">Selecione a opção</option>
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
<option value="3">Opção 3</option>
<option value="4">Opção 4</option>
</select>
<hr />
<select id="sel2"></select>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>


function carrega(id){
    
    var parametros = 'id='+id;
    action = 'arquivo2.php';
    $.ajax({
        type: "POST",
        url: action,
        data: parametros,
        beforeSend: function() {
            $('#sel2').empty().append('<option value="0">Aguarde...</option>');
        },        
        success: function(txt) {  
            $('#sel2').empty().append(txt);
        },
        error: function(txt) {
            $('#sel2').empty().append('<option value="0">Erro!</option>');
        }
    });
}


</script>

arquivo2.php

<?php
$id = $_POST['id'];


for($i=1;$i<=$id;$i++){
    echo '<option value="4">Sub opção '.$i.'</option>';
}
?>

Essa é a lógica da coisa.

[gabrieldarezzo 255]

Caso queira um exemplo de Ajax efetuado apenas com JavaScript, ontem mesmo respondi uma duvida:

 

http://forum.imasters.com.br/topic/549713-selecionar-item-e-exibir-resultado-na-tela-sem-carregar-a-pagina/?p=2194709

 

Mas tem algumas 'pegadinhas' mesmo como o Eserra falou....

Ai acabei montando um exemplo abaixo.

 

 

No code abaixo é gerada uma listagem em JSON:

 

listagem.php

<?php

//Normalmente a resposta do banco é um array de arrays associativos.
$linguagens = array(
	array(
		 'id'		=> 1
		,'nome'		=> 'PHP'
	)
	,array(
		 'id'		=> 2
		,'nome'		=> 'JavaScript'
	)
	,array(
		 'id'		=> 3
		,'nome'		=> 'C'
	)
	,array(
		 'id'		=> 4
		,'nome'		=> 'C++'
	)
);

/*
foreach($linguagens as $linguagem){
	echo "<option value='" . $linguagem['id'] . "'>" . $linguagem['nome'] . "</option>";
}
Já que você quer JSON, utilize JSON....
*/

//Assim o header HTTP já vai como UTF-8 e é informado que é um JSON. (JSON é necessariamente coding UTF-8, caso esteja trabalhando com ANSI, nada quem um utf8_encode não resolva...
header('Content-type: application/json; charset=utf-8');

echo json_encode($linguagens);

E agora como consumir apenas com o JavaScript:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	
	<select name="linguagem" id="select-id"></select>
	
	<script type="text/javascript">
		ajax = new XMLHttpRequest();
		ajax.open('GET', 'listagem.php', true);
		ajax.send();
		
		ajax.onreadystatechange = function() {
			if(ajax.readyState == 4 && ajax.status == 200) {
				var option;
				var sel = document.getElementById('select-id');
				
				//Transforma um texto simples em um Objeto/JSON  (IE 8+)
                                //A Resposta da requisição HTTP você pega assim: ajax.responseText
				//Porem é necessário converter a mesma 
                                var json = JSON.parse(ajax.responseText);
				
				

				
				
				//Executa um Loop dentro do retorno JSON
				for(x in json){
					 option = document.createElement("option");
					//Para exibir cada interação você pode fazer algo como:
					//console.log(json.x), o x vai aumentando.... e assim passando e cada elemento do JSON
					option.text = json[x].nome;
					option.value = json[x].id;
					sel.add(option);
				}
			}
		}
	
	
	</script>
</body>
</html>

Caso queira entender mais sobre a Linguagem ao invés da Lib (Jquery)

http://tableless.com.br/aprendendo-javascript-online/

https://www.eventials.com/pinceladasdaweb/javascript-boas-praticas-e-otimizacoes/

 

 

A CodeSchool tem uma introdução bacana tambem sobre Jquery e uma otima explicação sobre como manipular o DOM:

https://www.codeschool.com/courses/try-jquery

 

Falando em DOM,

http://tableless.com.br/tenha-o-dom/

 

Bons estudos.

Abraços.