database - 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();
});
解决方案
一个系列有多个季节。因此,在创建新剧集时,您需要一个相关的季节下拉菜单。您可以使用 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);
}
有什么不懂的可以问:)
推荐阅读
- php - IIS 站点将无法加载
- ios - 如何在文本字段中允许和获取拟我表情贴纸
- p2p - Torrent 客户端如何确保对文件所做的更改不会影响文件传输?
- css - CSS @import "~materlize-css" | 使用 Webpack | 没有制作风格
- excel - 在公式中,通过单元格值引用工作表
- ios - Podfile.lock 是否消除了将版本放入 Podfile 的需要?
- vue.js - 基于布尔值的 Vue 条件图像源
- android - 如何以编程方式授予权限
- tensorflow - 在 TF op 中评估 TF 模型会引发错误
- python-3.x - 如何使用 Python 重置 USB 端口?