PHP Mudar o OPTION de um SELECT de acordo com a mudança feito no outro SELECT

Thiago Petherson · 21 de fevereiro de 2019

Olá, pessoal.

Estou com uma dúvida referente a um formulário.

Eu tenho um formulário em que seus SELECT tem seus OPTION preenchidos através do PHP (Uma select feito em um arquivo create).

Porém, tem 3 campos (SELECT) que são interligados. Então eu gostaria de quando eu mudar um desses campos os outros campos fossem alterados também. Deixa eu mostrar um print da página.

Acima, temos os campos COD, EMPRESA e TRIBUTAÇÃO. No banco de dados, cada empresa tem um código (que é o campo COD) e tributação (que é o campo TRIBUTAÇÃO).

Eu gostaria que quando eu alterasse o campo COD, o select do campo EMPRESA fosse para a empresa (option) correspondente ao código do campo COD e vise e versa.

Abaixo segue o código de preenchimento dos SELECT.

<form action="banco-de-dados/tela-atividade-extra/update.php" method="post" id="formulario-login-sistema" onSubmit="alert('Atividade Cadastrada com Sucesso');">
														
							<div class="form-group col-lg-4">
								<label for="colaborador">Colaborador:</label>
								<select name="colaborador" id="colaborador" class="input form-control">
									<option><?php echo utf8_decode($_SESSION["nome"]) ?></option>				
								</select>
								
							</div>
							
							<div class="form-group col-lg-7 col-lg-offset-1">
								<label for="atividade">Qual será a atividade ?</label>
								<select name="atividade" id="atividade" class="input form-control">
									<?php
										while($registros_atividade = $query_pegar_atividades -> fetch_assoc())
										{
									?>	
										<option id="<?php echo utf8_decode($registros_atividade["ATIVIDADE"]); ?> ">	
											<?php echo  utf8_decode($registros_atividade['ATIVIDADE']); ?>
										</option>

									<?php
										}
									?>								
								</select>
								
												
							</div>
							
							<!-- LINHA -->
							
							<div class="form-group col-lg-4">
							
								<label for="data-vencimento">Qual é a data de vencimento:</label>
								<input type="date" name="data-vencimento" id="data-vencimento" class="input form-control" value="<?php echo $data_de_hoje_form_atividade; ?>">
								
							</div>
							
							<div class="form-group col-lg-4 col-lg-offset-1">
								<label for="designou-atividade">Quem designou a atividade?</label>
								<select name="designou-atividade" id="designou-atividade" class="input form-control">
									<option>CLIENTE</option>
									<?php
										while($registros_usuario = $query_pegar_designador -> fetch_assoc())
										{
									?>	
										<option id="<?php echo utf8_decode($registros_usuario["usuario"]); ?> ">	
											<?php echo  utf8_decode($registros_usuario['usuario']); ?>
										</option>

									<?php
										}
									?>					
								</select>
								
								
									
							</div>

							<!-- LINHA -->
							
							<div class="col-lg-12 alinhar-texto-no-centro" id="selecionar-empresas">
								<h3 class="alinhar-texto-no-centro">Selecionar Empresa</h3>
														
								<!-- CAMPO CODIGO DA EMPRESA -->
								<div class="form-group col-lg-2">
								
									<label for="codigo-empresa">COD</label>
									<select name="codigo-empresa" id="codigo-empresa" class="input form-control">
									<option></option>
										<?php
											while($registros_cod = $query_pegar_cod -> fetch_assoc())
											{
										?>	
											<option id="<?php echo utf8_decode($registros_cod["EMPRESAS"]);?>" name="<?php echo utf8_decode($registros_cod["TRIBUTACAO"]);?>">	
												<?php echo  utf8_decode($registros_cod['COD']); ?>
											</option>

										<?php
											}
										?>		
									</select>
									
									
									
								</div>
													
								<!-- CAMPO EMPRESA -->
								<div class="form-group col-lg-7">
									<label for="empresa">Empresa</label>
									<select name="empresa" id="empresa" class="input form-control">
									<option></option>
										<?php
										while($registros_empresas = $query_pegar_empresa -> fetch_assoc())
										{
										?>	
											<option id="<?php echo $registros_empresas["COD"]; ?> " name="<?php echo $registros_empresas["TRIBUTACAO"]; ?> ">	
												<?php echo  utf8_decode($registros_empresas['EMPRESAS']); ?>
											</option>

										<?php
											}
										?>						
									</select>
									
									
								</div>
								
								<!-- CAMPO TRIBUTAÇÃO -->
								<div class="form-group col-lg-3">
									<label for="tributacao">Tributação</label>
									<input name="tributacao" id="tributacao" class="input form-control" readonly>
										
									</input>
																										
								</div>
								
								
								<!-- CAMPO POSSUIR ARQUIVOS -->
								<div class="form-group col-lg-3 col-lg-offset-9" id="lista-empresas" style="display:inline">
									<div class="form-inline">
										<div class="radio">
											<label>
												<input type="radio" name="empresas-filtro" id="empresas-filtro" value="sim" class="form-control" checked>Minhas
											</label>
										</div>
										
										<div class="radio">
											<label>
												<input type="radio" name="empresas-filtro" id="empresas-filtro" value="nao" class="form-control">Todas
											</label>
										</div>
									</div>									
								</div>

								
								
								
							</div>

							<!-- LINHA -->
							
								<!-- CAMPO DETALHES -->
								
								<div class="form-group col-lg-12" id="destalhes">
									<label for="destalhes-da-atividade">Detalhes sobre a atividade</label>
									<textarea class="form-control" name="destalhes-da-atividade" id="destalhes-da-atividade" style="resize:none" maxlength="500" rows="10" placeholder="Descreva detalhes sobre a atividade"></textarea>
								
								</div>

							<!-- LINHA -->

								<!-- CAMPO QUANTIDADE DE PROCESSOS -->
								<div class="form-group col-lg-3">
									<label for="quantidade-processos">Quantidade de Processos: </label>
									<input class="form-control" type="number" name="quantidade-processos" id="quantidade-processos" min="1" max="100" maxlength="40" required>
								</div>
								
								<!-- CAMPO POSSUIR ARQUIVOS -->
								<div class="form-group col-lg-5 col-lg-offset-4" id="possui-arquivo" style="display:inline">
									<label for="possui-arquivo">Possui Arquivo ?</label>
									<div class="form-inline">
										<div class="radio">
											<label>
												<input type="radio" name="possui-arquivo" id="opcao-radio" value="S" class="form-control" checked> SIM
											</label>
										</div>
										
										<div class="radio">
											<label>
												<input type="radio" name="possui-arquivo" id="possui-arquivo" value="N" class="form-control"> NÃO
											</label>
										</div>
									</div>									
								</div>

								
								<!-- LINHA -->
								
								<div class="col-lg-3 col-lg-offset-9 form-group">
									<input name="salvar-atividade-extra" id="salvar-atividade-extra" class="btn btn-sm btn-primary btn-block" type="submit" value="Salvar">
								</div>
							
						</form>

Sei que a explicação não foi tão sucinta, porém espero que vocês consigam entender.

Se a solução fosse com jQuery , eu ficaria grato.

Obrigado!

DiF · 22 de fevereiro de 2019

@Thiago Petherson

56 minutos atrás, Thiago Petherson disse:

Se a solução fosse com jQuery , eu ficaria grato.

Mas é exatamente com isso que você resolve.

Basta colocar o evento de change no select COD, fazendo uma requisição assíncrona(ajax) para um arquivo php, enviando o valor deste COD. Então no php, você faz a consulta ao banco de dados, e retorna os dados. Estes dados você usa para selecionar os outros selects.

Exemplo de uso:

$("#codigo-empresa").change(function(){
        var selectedId = $(this).children("option:selected").val();
        
        $.ajax({
             url: 'dados.php',
             type: 'post',
             data: {id: selectId},
             dataType: "HTML"
            }).done(function(obj){
                  if (obj != null) {
                    var data = obj.data;
                    var selectbox = $('#empresa');
                    selectbox.find('option').remove();
                    $.each(data, function (i, d) {
                        $('<option>').val(d.IdEmpresa).text(d.Nome).appendTo(selectbox);
                    });
                }   
    
            });
    });

Naturalmente, NÃO COPIE, pois não vai funcionar. Já que é apenas um exemplo para você ter um norte de como fazer e o que implementar.

Thiago Petherson · 22 de fevereiro de 2019

Fala ai.

Então, sinceramente eu não estou tendo uma familiaridade com esse seu código, porque ainda não tenho muito contato com ajax.

Eu fiz um código jquery aqui que quase resolve o meu dilema. O único problema é que ele preenche um select ao trocar o outro, mas não faz o mesmo quando realizo a ação contrária. Vou mostrar meu código jquery.

$(function() 
 {

	$("select#codigo-empresa").change(function(e) 
	{
		var cod = $("select#codigo-empresa option:selected").attr('id');
		//$('select#empresa').show('<option selected>' + codigo + '</option>');
		$("select#empresa").val(cod);
				
	
		
	});
		

	

});


//FUNCAO PARA PRENCHER SELECT COD DE ACORDO COM A EMPRESA ESCOLHIDA

$(function() 
 {
	
	$("select#empresa").change(function(e) 
	{
		var codigo = $("select#empresa option:selected").attr('id');
		//$('select#codigo-empresa').show('<option selected>' + codigoo + '</option>');
		$("select#codigo-empresa").val(codigo);
	
		
		
		
	});

	
	
});


//FUNCAO PARA PRENCHER SELECT TRIBUTAÇÃO DE ACORDO COM O CÓDIGO (COD) ESCOLHIDO

$(function() 
 {
	$("select#codigo-empresa").change(function(e) 
	{
		var trib = $("select#codigo-empresa option:selected").attr('name');
		$("input[id='tributacao']").val(trib);
		
	
	
	});

		
	
});


//FUNCAO PARA PRENCHER SELECT TRIBUTAÇÃO DE ACORDO COM A EMPRESA ESCOLHIDA

$(function() 
 {
	$("select#empresa").change(function(e) 
	{
		var tribu = $("select#empresa option:selected").attr('name');
		$("input[id='tributacao']").val(tribu);
	
		
		
	});

		
	
});