javascript - Laravel 依赖选择

Question

我已经为此苦苦挣扎了好几天。我必须选择框。一个用于部门，另一个用于部门。代码是：

路线：

查看字段：

控制器：

Javascript：

当我单击第一个选择时，我可以获得相关部分，但选择的部分不会附加。我究竟做错了什么？我正在使用 Laravel 和 SQL Server 实现这个解决方案。

感谢所有帮助。干杯，并保持良好的工作:)。

标签： javascriptsql-serverajaxlaravel

Answer 1

在几个月没有机会使用 Laravel 之后，我花了一些时间来解决这个问题。我想要 3 个组合框（国家、地区、县），它们依赖于葡萄牙国家。我实施的解决方案记录在下图中。如果您有任何问题，请不要犹豫。我知道这不是完美的解决方案，但这就是我设法得到的:)。感谢你出色的工作，继续保持。

路线：

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

查看字段：

<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

控制器：

    /**
     * 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>

结果：