Laravel Dependent Selects

Question

I've been struggling with this for several days. I have to select boxes. One for departments and another for sections. The code is:

Route:

View fields:

Controller:

Javascript:

When I click in the first select I can get the related sections but the sections select doesn´t append. What am I doing wrong? I am implementing this solution with Laravel and SQL Server.

All help is appreciated. Cheers, and keep up the good work :).

Answer 1

After months of not having the opportunity to use Laravel I took some time to resolve this issue. I would like to have 3 comboboxes (Country, District, County) that were dependent for the country Portugal. The Solution I implemented is documented in the following images. If you have questions do not hesitate to ask. I know this is not the perfect solution but that's what I managed to get :). Thank you and keep up the good work.

Route:

//Listas (Distritos e Concelhos)
Route::get('/website/candidaturas/obterlistadistritos','Oportunidades\RecrutamentoController@obterListaDistritos');
Route::get('/website/candidaturas/obterlistaconcelhos','Oportunidades\RecrutamentoController@obterListaConcelhos');

View fields:

<label for="paisCandidatura">País</label>
<select onChange="" class="form-control {{ $errors->has('paisCandidatura') ? 'is-invalid' : '' }}" id="paisCandidatura" name="paisCandidatura">

<option value=""></option>
    @foreach($paises as $pais)
        @if($pais->id == old('paisCandidatura'))
            <option value="{{$pais->id}}" selected>{{$pais->nome}}</option>
        @else
            <option value="{{$pais->id}}">{{$pais->nome}}</option>
        @endif
    @endforeach

</select>
@if($errors->has('paisCandidatura'))
    <div class="invalid-feedback">{{ $errors->first('paisCandidatura') }}</div>
@endif

<label for="distritoCandidatura">Distrito</label>
<select onChange="" class="form-control {{ $errors->has('distritoCandidatura') ? 'is-invalid' : '' }}" id="distritoCandidatura" name="distritoCandidatura">
    <option value =""></option>
    @if(old('paisCandidatura') == 141)

        @foreach($distritos as $distrito)

            @if($distrito->id == old('distritoCandidatura'))
                <option value="{{$distrito->id}}" selected>{{$distrito->nome}}</option>
            @else
                <option value="{{$distrito->id}}">{{$distrito->nome}}</option>
            @endif

        @endforeach

    @endif

</select>
@if($errors->has('distritoCandidatura'))
    <div class="invalid-feedback">{{ $errors->first('distritoCandidatura') }}</div>
@endif

<label for="concelhoCandidatura">Concelho</label>
<select onChange="" class="form-control {{ $errors->has('concelhoCandidatura') ? 'is-invalid' : '' }}" id="concelhoCandidatura" name="concelhoCandidatura">
    <option value =""></option>
    @if(old('paisCandidatura') == 141)

        @foreach($concelhos as $concelho)

            @if($concelho->id == old('concelhoCandidatura'))
                <option value="{{$concelho->id}}" selected>{{$concelho->nome}}</option>
            @else
                <option value="{{$concelho->id}}">{{$concelho->nome}}</option>
            @endif

        @endforeach

    @endif

</select>
@if($errors->has('concelhoCandidatura'))
    <div class="invalid-feedback">{{ $errors->first('concelhoCandidatura') }}</div>
@endif

Controller:

    /**
     * Return a list of districts associated to a country
     */
    public function obterListaDistritos(Request $request)
    {
        $distritos = Distrito::all()
        ->where("pais_id",$request->pais_id)
        ->pluck("nome","id");
        return response()->json($distritos);
    }

    /**
     * Return a lista of councils associated to a district
     */
    public function obterListaConcelhos(Request $request)
    {
        $concelhos = Concelho::all()
        ->where("distrito_id",$request->distrito_id)
        ->pluck("nome","id");
        return response()->json($concelhos);
    }

Javascript:

    <script type="text/javascript">
        $('#paisCandidatura').change(function(){
        var paisCandidatura = $(this).val();    
        if(paisCandidatura){
            $.ajax({
               type:"GET",
               url:"{{url('/candidaturas/obterlistadistritos')}}?pais_id="+paisCandidatura,
               success:function(res){               
                if(res){
                    $("#distritoCandidatura").empty();
                    $("#distritoCandidatura").append('<option value=""></option>');
                    $("#concelhoCandidatura").empty();
                    $("#concelhoCandidatura").append('<option value=""></option>');
                    $.each(res,function(key,value){
                        $("#distritoCandidatura").append('<option value="'+key+'">'+value+'</option>');
                    });
               
                }else{
                   $("#distritoCandidatura").empty();
                   $("#concelhoCandidatura").empty();
                }
               }
            });
        }else{
            $("#distritoCandidatura").empty();
            $("#concelhoCandidatura").empty();
        }      
       });
       
        $('#distritoCandidatura').on('change',function(){
        var distritoCandidatura = $(this).val();    
        if(distritoCandidatura){
            $.ajax({
               type:"GET",
               url:"{{url('/candidaturas/obterlistaconcelhos')}}?distrito_id="+distritoCandidatura,
               success:function(res){               
                if(res){

                    $("#concelhoCandidatura").empty();
                    $("#concelhoCandidatura").append('<option value=""></option>');
                    $.each(res,function(key,value){
                        $("#concelhoCandidatura").append('<option value="'+key+'">'+value+'</option>');
                    });
               
                }else{

                   $("#concelhoCandidatura").empty();

                }
               }
            });
        }else{

            $("#concelhoCandidatura").empty();
            
        }
            
       });
    </script>

Result:

Answer 2

To return json in laravel you should write

return response()
        ->json($seccoes);

I suggest you to use eloquent it will make the code more readable maintain.