首页 > 解决方案 > 2个外键1个创建刀片

问题描述

我认为它很容易,但我的大脑并没有试图理解它。所以问题是我有一个系列表、一个季节表和一个剧集表。我创建一个系列,然后我通过选择一个系列来创建一个季节,然后我通过首先选择一个系列然后是季节来创建剧集。我被困在剧集部分。我想要的是,当我选择一个季节时,下拉表中只有与该系列相关的系列。我可以就如何解决这个问题获得一些帮助。另外,在我的剧集表中,我确实有 season_id 和 episode_id。这是我为剧集创建的刀片:

@extends('layouts.admin')

@section('content')
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h1 class="card-title">
                Create Episode
            </h1>
        </div>
        <div class="card-body">
            <form action="{{route('episodes.store')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="form-group">
                    <label for="series_id">Series</label>
                    <select class="form-control" name="series_id">
                        @foreach ($series as $series)
                            <option value="{{$series->id}}">{{$series->name}}</option>
                        @endforeach
                    </select>
                </div>
                 <div class="form-group">
                    <label for="season_id">Seasons</label>
                    <select class="form-control" name="season_id">
                        @foreach ($seasons as $seasons)
                            <option value="{{$seasons->id}}">{{$seasons->name}}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" name="name" id="name">
                </div>
                <div class="form-group">
                    <label for="about">About</label>
                    <textarea name="about" id="" class="form-control" cols="30" rows="10">About</textarea>
                </div>
                <div class="form-group">
                    <label for="subtitle">Subtitle</label>
                    <input type="text" class="form-control" name="subtitle">
                </div>
                <div class="form-group">
                    <label for="serno">Serial Number</label>
                    <input type="text" class="form-control" name="serno">
                </div>
                <div class="row">
                    <div class="col-md">
                        <div class="form-group">
                            <label for="subtitle">URL 1</label>
                            <input type="text" class="form-control" name="subtitle">
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="form-group">
                            <label for="subtitle">URL 2</label>
                            <input type="text" class="form-control" name="subtitle">
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="form-group">
                            <label for="subtitle">URL 3</label>
                            <input type="text" class="form-control" name="subtitle">
                        </div>
                    </div>
                </div>
                
                    <label for="image">Image</label>
                    <input type="file" name="image" class="form-control">

                <button type="submit" class="btn btn-primary">Save</button>
            </form>
        </div>
    </div>
</div>
@endsection

这是创建的功能:

public function create()
    {
        $seasons = Season::all();
        $series = Series::all();
        return view('admin.episodes.create', compact('seasons', 'series'));
    }

现在我想对这个系列做点什么,我从 Season::all 中选择季节,然后从我选择的季节中显示系列。
编辑:这是我的迁移的样子:
系列:

Schema::create('series', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('slug');
            $table->string('about');
            $table->string('image');
            $table->timestamps();
        });

季节:

Schema::create('seasons', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('series_id');
            $table->string('name');
            $table->string('slug');
            $table->string('subtitle');
            $table->string('about');
            $table->string('image');
            $table->integer('serno');
            $table->timestamps();
        });

剧集:

Schema::create('episodes', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('series_id');
            $table->integer('season_id');
            $table->string('name');
            $table->string('slug');
            $table->string('subtitle');
            $table->string('about');
            $table->string('image');
            $table->integer('serno');
            $table->string('url');
            $table->string('url2');
            $table->string('url3');
            $table->string('medium');
            $table->string('medium2');
            $table->string('medium3');
            $table->timestamps();
        });

标签: databaselaraveleloquentforeign-keysrelationship

解决方案


一个系列有多个季节。因此,在创建新剧集时,您需要一个相关的季节下拉菜单。您可以使用 ajax 请求来加载相关的下拉选择数据。当一个系列被选中时,一个请求将通过并且该系列的季节将被返回。

所以从表格开始

<div class="form-group">
    <label for="series_id">Series</label>
    <select class="form-control" name="series_id" id="series_id">
        @foreach ($series as $series)
            <option value="{{$series->id}}">{{$series->name}}</option>
        @endforeach
    </select>
</div>
<div class="form-group">
    <label for="season_id">Seasons</label>
    <select class="form-control" name="season_id" id="season_id">
        <option value="">Select</option>
    </select>
</div>

脚本部分

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
    $('#series_id').change(function(){
        var id = $(this).val();
        var url = '{{ route("getSeasons", ":id") }}';
        url = url.replace(':id', id);

        $('#season_id').find('option').not(':first').remove();
        $.ajax({
           url: url,
           type: 'get',
           dataType: 'json',
           success: function(response){
               var len = 0;
               if(response != null){
                   len = response.length;
               }
               else {
                   alert('sorry, no seasons were found for this series');
               }
               if(len > 0){
                   for(var i=0; i<len; i++){
                       var id = response[i].id;
                       var name = response[i].name;
                       var option = "<option value='"+id+"'>"+name+"</option>"; 
                       $("#season_id").append(option); 
                   }
               }
            }
        });
    });
</script>

web.php 文件中的路由

Route::get('getseasons/{id}', 'YourController@getSeasons')->name('getSeasons');

和控制器代码

public function getSeasons($id=0){
    $data = Season::where('series_id',$id)->get();
    return response()->json($data);
}

有什么不懂的可以问:)


推荐阅读