Carregar dados dinamicamente ajax e php

[greg_kaippert]

Bom dia galera! Estou com um dúvida. Preciso fazer o carregamento dinâmico de dados vindo do DB. Eu consigo fazer com o campo select. Por exemplo, quando seleciono o primeiro select, abaixo ele lista o outro campo select, e assim sucessivamente, no total são 3 campos. Grupos, Clientes e Instalações. Mas eu não quero que abre com um campo select, eu quero que clique no grupo e apareça em baixo o cliente, e quando clicar em cliente aparecer instalações, com seus respectivos ID. Desde já agradeço aí quem puder ajudar.

 

Meu código em ajax: 

<script>
         $(document).ready(function(){
        // Evento change no campo tipo  
         $("select[name=nome_grupo]").change(function(){
            // Exibimos no campo marca antes de concluirmos
            $("select[id=clientes]").html('<option value="">Carregando...</option>');
            // Exibimos no campo marca antes de selecionamos a marca, serve também em caso
            // do usuario já ter selecionado o tipo e resolveu trocar, com isso limpamos a
            // seleção antiga caso tenha feito.
            $("select[id=instalacao]").html('<option value="">Escolha uma instalação...</option>');
            // Passando tipo por parametro para a pagina ajax-marca.php
            $.post("http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php",
                  {id:$(this).val()},
                  // Carregamos o resultado acima para o campo marca
                  function(valor){
                     $("select[id=clientes]").html(valor);
                  }
                  )
         })
         // Evento change no campo marca 
         $("select[id=clientes]").change(function(){
            // Exibimos no campo modelo antes de concluirmos
            $("select[id=instalacao]").html('<option value="">Carregando...</option>');
            // Passanddo marca por parametro para a pagina ajax-modelo.php
            $.post("http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php",
                  {id:$(this).val()},
                  // Carregamos o resultado acima para o campo modelo
                  function(valor){
                     $("select[id=instalacao]").html(valor);
                  }
                  )
            
         })
     
      })        
</script>

 

Código em PHP:

<?php 
include("conexao.php");

try {
$id_dados = strip_tags(trim($_POST['id']));
$resu = $pdo->query("SELECT * FROM cad_clientes WHERE id_grupo = $id_dados ");
$resu->bindValue(1, $id_dados);
$resu->execute();

    }

catch(Exception $e)
{
print "ERRO!:". $e->getMessage() . "<br>";
die();
}

while($lista = $resu->fetch(PDO::FETCH_ASSOC)) { 

echo '<option value="'.$lista['id_cliente'].'">'.$lista['nome_cliente'].'</option>';

}

?>

 

Index:

<div class="alinhar">
<form name="listadados" id="listadados" action="">
Grupo: <select name="nome_grupo" id="grupo">
<option value="">Escolha o grupo</option>
<?php while($resut = $resu->fetch(PDO::FETCH_ASSOC)) { ?>
<option value="<?php echo $resut['id_grupo']; ?>"><?php echo $resut['nome_grupo']; ?></option>
<?php } ?>
</select>
<br><br>

Clientes: <select name="nome_cliente" id="clientes"></select>
<br><br>
Instalações: <select name="nome_instalacao" id="instalacao"></select>

</form>
</div>