Ir para conteúdo

Arquivado

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

josenilson

select dinamico 3 campos

Recommended Posts

 

Olá pessoal, 

 

Nesse Script abaixo estou fazendo  o seguinte: 

 

Ao selecionar algo no primeiro select id"frota" o segundo select id"placa" ativa e lista a placa e por ultimo ao selecionar a placa o select motorista lista o motorista . 

 

O que  preciso porem estou limitado ate aqui,  é o seguinte:

 

Quando o primeiro select id"frota" for selecionado o segundo select id"placa" tem que trazer  a placa daquela  frota  na sua respectiva linha da tabela,  assim sucessivamente quando selecionar a placa o terceiro select vai trazer o motorista daquela respectiva linha. 

 

Ou seja, ao final quando o usuário selecionar o primeiro select id "frota" os demais  placa/motorista vão ser preenchidos dinamicamente de acordo com a frota.

 

Outro detalhe é que se observarem os select placa/motorista estão com os Options  inseridos manualmente, digo não sei listar isso vindo direto da tabela através  do php.

 

Desde já agradeço a todos.

 

<?php
include "conexao.php";



?>

<!DOCTYPE html>
<html>
<head>
	<title>TESTE DE COMBO </title>

		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

</head>


<script type="text/javascript">
	
$(document).ready(function(){

 /* Faz a condição do primeiro select */
	$("#frota").change(function(){
  	var frota = $(this).val();

  	if(frota != ""){
    	$("#placa").html(''); //limpa o segundo select para os novos options
    	$("#placa").append('<option>PLACA</option>');
          $("#placa").append('<option>JRP6212</option>');

    }
   
  })
  
  /* Faz a condição do segundo select */
  	$("#placa").change(function(){
  	var placa = $(this).val();
      if(placa != ""){
        $("#motorista").html(''); //limpa o terceiro select para os novos options
        $("#motorista").append('<option>MOTORISTA</option>');
        $("#motorista").append('<option>JOSENILSON</option>');
      }




  })
  
})


</script>	

<body>

<label>Selecione a frota </label>
<select id="frota">
<option value="" name"motorista"> 
FROTA  

<?php 
$busca = 'SELECT * FROM motorista ';
$result = $db->query($busca, PDO::FETCH_ASSOC) or die("erro ao conectar");
foreach ($result as $row){
  echo '<option value='.$row['idmotorista'].'>'.$row['frota'].'</option>';

}
?>
</option>
</select>

<br><br>
<select id="placa">



</select>

<br><br>
<select id="motorista">
</select>






</body>
</html>

script de conexão. 

 

<?php
	
$dsn = 'mysql:host=localhost;dbname=teste;charset=utf8';
$username = 'root';
$password = '';
 
$db = new PDO($dsn, $username, $password);

if(!$db){
	echo "erro ao conectar ";
}
?>







script da tabela . 

 

CREATE TABLE `teste`.`frota` 
( `idfrota` INT NOT NULL AUTO_INCREMENT ,
`frota` VARCHAR(10) NOT NULL , 
`placa` VARCHAR(10) NOT NULL , 
`motorista` VARCHAR(10) NOT NULL ,
PRIMARY KEY (`idfrota`)) ENGINE = MyISAM

 

index.php

conexao.php

Compartilhar este post


Link para o post
Compartilhar em outros sites
24 minutos atrás, josenilson disse:

Quando o primeiro select id"frota" for selecionado o segundo select id"placa" tem que trazer  a placa daquela  frota  na sua respectiva linha da tabela,  assim sucessivamente quando selecionar a placa o terceiro select vai trazer o motorista daquela respectiva linha. 

O relacionamento das tabelas estão corretos? (Chave estrangeira, LEFT/INNER JOIN)

 

É a primeira etapa.

Imaginando uma estrutura de arvore pode facilitar o entendimento de 1:n

Exemplo:

\ 
 \ 
/ \ (Fornecedor)
 / \ (Computadores compatíveis)
/   \  (etc)

-------

 

Após isso como deixar 'dinâmico' tem algumas opções, uma que eu curto bastante é após fazer essa estrutura de arvore (arrays de arrays) ir acessando e filtrando com o JavaScript.

 

Exemplo com jQuery:

http://gabrieldarezzo.github.io/desafiosInternos/select/jquery.html

 

Exemplo com JS puro:

http://gabrieldarezzo.github.io/desafiosInternos/select/index.html

 

Exemplo de como montar essa estrutura:

https://forum.imasters.com.br/topic/555304-estrutura/

 

------------------------------

 

Outra opção é ir fazendo com ajax monitorando o evento change do select (mais simples), até pelo tamanho dos relacionamentos talvez mais recomendadas já que temos uma estrutura de 3:

id_frota->placa->motorista)

 

 

 

Recomendo a leitura se não conhece ajax:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#guia-definitivo-ajax

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 horas atrás, gabrieldarezzo disse:

O relacionamento das tabelas estão corretos? (Chave estrangeira, LEFT/INNER JOIN)

 

É a primeira etapa.

Imaginando uma estrutura de arvore pode facilitar o entendimento de 1:n

Exemplo:


\ 
 \ 
/ \ (Fornecedor)
 / \ (Computadores compatíveis)
/   \  (etc)

-------

 

Após isso como deixar 'dinâmico' tem algumas opções, uma que eu curto bastante é após fazer essa estrutura de arvore (arrays de arrays) ir acessando e filtrando com o JavaScript.

 

Exemplo com jQuery:

http://gabrieldarezzo.github.io/desafiosInternos/select/jquery.html

 

Exemplo com JS puro:

http://gabrieldarezzo.github.io/desafiosInternos/select/index.html

 

Exemplo de como montar essa estrutura:

https://forum.imasters.com.br/topic/555304-estrutura/

 

------------------------------

 

Outra opção é ir fazendo com ajax monitorando o evento change do select (mais simples), até pelo tamanho dos relacionamentos talvez mais recomendadas já que temos uma estrutura de 3:

id_frota->placa->motorista)

 

 

 

Recomendo a leitura se não conhece ajax:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#guia-definitivo-ajax

 

 

 

 

 

 

 

Obrigado pelas dicas, 

então o exemplo que citei acima funciona mas estou listando as informações manualmente.

Exemplo: ao selecionar um valor no primeiro select o frota  ela aciona o segundo  select nesta caso id "placa" mas estou listando as opções dele manualmente 

$("#placa").append('<option>JRP6212</option>');

trago essa opção da tabela no banco ? e nesse caso teria que chamar a placa  de acordo com a referida frota imagina que tenha que ser algo  com o ID da frota  = idfrota. 

 

poderia mostrar um exemplo a respeito, se for possível dai eu vou estudar e tentar fazer os demais, eu agraço. 

 

/* Faz a condição do primeiro select */
	$("#frota").change(function(){
  	var frota = $(this).val();

  	if(frota != ""){
    	$("#placa").html(''); //limpa o segundo select para os novos options
    	$("#placa").append('<option>PLACA</option>');
          $("#placa").append('<option>JRP6212</option>');

    }
   
  })

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por josenilson
      Olá pessoal, 
       
      Nesse Script abaixo estou fazendo  o seguinte: 
       
      Ao selecionar algo no primeiro select id"frota" o segundo select id"placa" ativa e lista a placa e por ultimo ao selecionar a placa o select motorista lista o motorista . 
       
      O que  preciso porem estou limitado ate aqui,  é o seguinte:
       
      Quando o primeiro select id"frota" for selecionado o segundo select id"placa" tem que trazer  a placa daquela  frota  na sua respectiva linha da tabela,  assim sucessivamente quando selecionar a placa o terceiro select vai trazer o motorista daquela respectiva linha. 
       
      Ou seja, ao final quando o usuário selecionar o primeiro select id "frota" os demais  placa/motorista vão ser preenchidos dinamicamente de acordo com a frota.
       
      Outro detalhe é que se observarem os select placa/motorista estão com os Options  inseridos manualmente, digo não sei listar isso vindo direto da tabela através  do php.
       
      Desde já agradeço a todos.
      <?php include "conexao.php"; ?> <!DOCTYPE html> <html> <head> <title>TESTE DE COMBO </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ /* Faz a condição do primeiro select */ $("#frota").change(function(){ var frota = $(this).val(); if(frota != ""){ $("#placa").html(''); //limpa o segundo select para os novos options $("#placa").append('<option>PLACA</option>'); $("#placa").append('<option>JRP6212</option>'); } }) /* Faz a condição do segundo select */ $("#placa").change(function(){ var placa = $(this).val(); if(placa != ""){ $("#motorista").html(''); //limpa o terceiro select para os novos options $("#motorista").append('<option>MOTORISTA</option>'); $("#motorista").append('<option>JOSENILSON</option>'); } }) }) </script> <body> <label>Selecione a frota </label> <select id="frota"> <option value="" name"motorista"> FROTA <?php $busca = 'SELECT * FROM motorista '; $result = $db->query($busca, PDO::FETCH_ASSOC) or die("erro ao conectar"); foreach ($result as $row){ echo '<option value='.$row['idmotorista'].'>'.$row['frota'].'</option>'; } ?> </option> </select> <br><br> <select id="placa"> </select> <br><br> <select id="motorista"> </select> </body> </html> conexão 
      <?php $dsn = 'mysql:host=localhost;dbname=teste;charset=utf8'; $username = 'root'; $password = ''; $db = new PDO($dsn, $username, $password); if(!$db){ echo "erro ao conectar "; } ?> tabela 
      CREATE TABLE `teste`.`frota` ( `idfrota` INT NOT NULL AUTO_INCREMENT , `frota` VARCHAR(10) NOT NULL , `placa` VARCHAR(10) NOT NULL , `motorista` VARCHAR(10) NOT NULL , PRIMARY KEY (`idfrota`)) ENGINE = MyISAM Em anexo consta os arquivos, desde já agradeço.
      index.php
      conexao.php
    • Por josenilson
      Pessoal, estou no meio de um desafio e peço a orientação de vocês,   na imagem em anexo esta uma tabela, com 3 campos  preciso do seguinte:
       
      quando eu selecionar o primeiro select os dois a frete tem que carregar as informações automática mente,  mas confesso  que não tenho conhecimento de linguagem suficiente para realizar este feito,   no php eu consigo listar no  primeiro  select o primeiro campo da tabela  N_Frota_Cavalo mas como posso deixar isso automático quando selecionar o primeiro os demais filtrar a linha e carregar as demais informações,  consigo isso somente com php ?   
       
      muito obrigado. 
       

×

Informação importante

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