Fórum [DUVIDA] - Select dependente de Estado / Cidade - Laravel #606243

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