javascript - 选择框 Laravel 选择 onChange

Question

我想根据 Laravel 中的选择框 poule_id 过滤一些结果。例如，如果我选择 poule_id = 1，它应该显示(点击时)poule_id = 1 中的所有团队。

有人知道实现这一目标的良好实践或快速教程吗？我想为此使用 jQuery。

目前，我有:

Route::get('search/equipes' , 'CompetitionController@searchEquipes');

我的 Controller :

public function searchEquipes(Request $request)
    {
        $equipes = [];

        if($request->has('poule_id')){
            $equipes = EquipePoule::where('poule_id',$request->poule_id)
                ->get();
        }


        return response()->json(['equipes' => $equipes]);
    }



 <div class="tab-pane" id="tab_2">
    <div class="col-md-4 pull-right">


 <select id="poule">
@foreach($select_poules as $select_poule)
<option value="{{$select_poule->id}}">{{$select_poule->lb_poule}}</option>
@endforeach
</select>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Club</th>
                    <th>Nom de l'équipe</th>
                    <th>Bonus(+/-)</th>
                </tr>
            </thead>
            <tbody>
                @foreach($equipes as $equipe)
                <tr>
                    <td><a href="{!! route('club.show', $equipe->equipe->structure->id) !!}">{{$equipe->equipe->structure->nom_structure}}</a></td>
                    <td><a href="{!! route('equipe.show', $equipe->equipe->id) !!}">{{$equipe->equipe->lb_equipe}}</a></td>
                    <td>{!! Form::text('nb_bonus') !!}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).on('change', '#poule', function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'GET',
                dataType: "json",
                url : '/search/equipes',
                data : {poule_id : $('#poule').val()},
                success:function(data){

                    $('table tbody').empty().append(data.equipes);

                },
                timeout:10000
            });

        });
    </script>

Answer 1

在您的 JavaScript 文件中:

$(document).on('change', '#poule', function (e) {

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type: 'GET',
                        dataType: "json",
                        url : '/equipes/search',
                        data : {poule_id : $('#poule').val()},
                        success:function(data){

                        $('table tbody').empty(); 
                        for (var i = 0; i < data.equipes.length; i++){
                           $('table tbody').append('<tr><td>'+data.equipes[i].lb_equipe+'</td></‌​tr>')
                          }

                        },
                        timeout:10000
                    });

            });

您应该向您的选择添加一个 ID。

在您的EquipesController中定义一个方法“搜索”，并在您的 route 添加/equipes/search/路线

public function search(Request $request)
    {

        $equipes = [];

        if($request->has('poule_id')){
            $equipes = DB::table("equipes")
                ->where('poule_id',$request->poule_id)
                ->get();
        }

        return response()->json(['equipes' => $equipes]);

    }