[DUVIDA] - Select dependente de Estado / Cidade - Laravel

25/10/2019

Boa tarde,

Estou com um problema, pesquisando consegui implementar estes codigos, o objetivo � fazer que quando o usu�rio selecione a UF do estado no select de cidade s� apare�a as cidades referente ao ID da UF.

Segue meus codigos:

Migrations de Estado e Cidade:

   public function up()
    {
        Schema::create('estados', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nome');
            $table->string('sigla');
            $table->bigInteger('pais_id')->unsigned();
            $table->timestamps();
        });
        Schema::table('estados', function (Blueprint $table){

            $table->foreign('pais_id')->references('id')->on('pais');
        });
         
    }

    public function up()
    {
        Schema::create('cidades', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nome');
            $table->bigInteger('estado_id')->unsigned();
            $table->timestamps();
        });

        Schema::table('cidades', function (Blueprint $table){

            $table->foreign('estado_id')->references('id')->on('estados');
        });
    }

Controller:

<?php

namespace App\Http\Controllers;
use App\Estado;
use App\Cidade;
use App\Http\Requests;
use App\Pessoa;
use Illuminate\Support\Facades\Response;
use Illuminate\Http\Request;

class ClienteController extends Controller
{

    public function index()
    {
        $estados = Estado::all()->pluck('sigla','id');
        return view('pessoas.cliente', compact('estados'));
    }
    public function pegarCidades($id)
    {
        $cidades = Estado::whereIn('estado_id', $id)->pluck('sigla','id')->get();
        return json_encode($id);
    }
        public function adicionar(){
            
            return view('pessoas.adicionar');
        }
    
    
        public function salvar(Request $request){
            \App\Pessoas::create( $request->all());
            
            return redirect()->route('pessoas.cliente');
    
        }
}

Codigo jQuery:

<script src="{{url('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js')}}"></script>
<script>

$(document).ready(function(){

	$('select[name="estado"]').on('change', function(){

		var estado_id = $(this).val();
		console.log(estado_id);

			$.ajax({

				url: '/pegarCidades/'+estado_id,
				type: 'GET',
				dataType: 'json',
				success: function(data){

					console.log(data);
				$('select[name=cidade]').empty();
				$.each(data,function(key,value){

					$('select[name=cidade]').empty().append('<option value="'+key+'">'+values+'</option>');
						
				});
		
				}
			})

});
});


</script>

Labels na View:

<label for="text">Estado:</label>
	<select name="estado" id="estado" class="form-control" tabindex="1">
	        <option value="" disabled selected>Escolha um Estado</option>   
			@foreach($estados as $key => $value)
				<option value="{{$key}}">{{$value}}</option>
			@endforeach
	 </select>
	</div>
        <div class="col-mad-6">
		<div class="form-group">
	               <label for="text">Cidade:</label>
				<select name="cidade" id="cidade" class="form-control" tabindex="1">
		                           <option value="">Escolha uma Cidade</option>
                            	</select>
				</div>

At� coloquei um console.log(data); ali para ver no console se ele estava pegando o ID, ele pega o ID mas n�o mostra nada no select de cidades.

Alguem pode dar um help???

Obrigado!

Jorge Grieger

Curtir t�pico + 0

Responder

Posts

25/10/2019

Jorge Grieger

S� corrigindo no Controller o return json_encode($id) correto � return json_encode($cidades);

Responder

Gostei + 0