正直なところLaravelに入るの早すぎると思います。「Web職人のためのフレームワーク」がキャッチコピーなので、現状で「何もわからない」のであれば、何かしらアドバイスされても「分からない」でしかなく、回答者の言ってることは絶対理解できません。
「詳しく、コードを」と書いてる時点で質問ではなく作業依頼です。
前提・実現したいこと
動的なセレクトボックスを実装したいです。
一つ目のセレクトボックスで、科目(tagsデーブル)を選択すると二つ目のセレクトボックスで一つ目で選んだ科目のみの課題(memosテーブル)を表示できるよう連動させたいです。
]
]
該当のソースコード
progress
<div class="form-group row”> <label for="memo">科目</label> <select name='tagname' class="form-control" > @foreach($tags as $tag) <option value="{{ $tag['tagname']}}">{{ $tag['tagname']}}</option> @endforeach </select> <div> <div class="form-group row”> <label for="memo">課題</label> <select name='content' class="form-control" > @foreach($memos as $memo) <option value="{{ $memo['content']}}">{{ $memo['content']}}</option> @endforeach </select>
Homecontroller
public function progress() { $user = \Auth::user(); $memos = Memo::all(); $tags = Tag::all(); return view('progress',compact('user','memos','tags'));
Webphp
Route::get('/progress', 'HomeController@progress')->name('progress');
試したこと
色々調べましたが、わかりませんでした。できなくて本当に困っています。
初心者で至らない点があると思いますが、よろしくお願いいたします。
補足情報
progressblade
@extends('layouts.app') @section('content') <div class="row justify-content-center ml-0 mr-0 h-100"> <div class="card w-100"> <div class="card-header">進捗状況登録</div> <div class="card-body"> <form method='POST' action="/store2"> @csrf <input type='hidden' name='user_id' value="{{ $user['id'] }}"> <div class="form-group row”> <label for="memo">科目</label> <select name='tagname' id="tagname" type="select" class="form-control" > @foreach($tags as $tag) <option value="{{ $tag['tagname']}}">{{ $tag['tagname']}}</option> @endforeach </select> <div> <div class="form-group row”> <label for="memo">課題</label> <select name='content' id="memo" type="select" class="form-control" > @foreach($memos as $memo) <option value="{{ $memo['content']}}">{{ $memo['content']}}</option> @endforeach </select> <div class="text-center"> <button type='submit' class="btn btn-danger btn-lg">登録する</button> </div> </form> </div> </div> </div> @endsection @push('scripts') <script src="{{ asset('/js/progress.js') }}" type="module"></script> @endpush
progressjs
$(function() { // 「科目」のセレクトボックスが変更された場合 $('#tagname').on('change', function() { // value属性の値を取得 let tag_name_val = $(this).val(); // tag_name_valをHomeControllerへ渡す $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, type: "POST", url: "/addContent", dataType: "JSON", data: { val: tag_name_val } }) .done(function(data) { $.each(data['memos'], function(index, value) { // コントローラ側で取得した課題のデータをセレクトボックスに追加する $('#memo').append($('<option>').val(value.id).text(value.name)); }) }) .fail(function(jqXHR, textStatus, errorThrown){ console.log(jqXHR); console.log(textStatus); console.log(errorThrown); }); }) })
app
layoutsのapp.blade.php <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <body bgcolor="black" text="white"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'SimpleNote') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> @yield('js') <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/utility.css') }}" rel="stylesheet"> @yield('css') <script src="//code.jquery.com/jquery-1.12.1.min.js"></script> {{-- <script src="{{ asset('js/progress.js') }}" defer></script> --}} @stack('scripts') </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @guest <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> </li> @if (Route::has('register')) <li class="nav-item"> <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> </li> @endif @else <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('ログアウト') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> <main class="main"> @if(session('success')) <div class="alert alert-success" role="alert"> {{ session('success') }} </div> @endif <div class="card" style="width: 18rem;"> <ul class="list-group list-group-flush"> <li class="list-group-item"> <a href="{{ url('/mypage') }}"> マイページ </a> </li> <li class="list-group-item"> <a href="{{ url('/add') }}"> 科目登録 </a> </li> <li class="list-group-item"> <a href="{{ url('/create') }}"> 課題作成 </a></li> <li class="list-group-item"> <a href="{{ url('/progress') }}"> 進捗状況登録 </a></li> </ul> </div> </div> <p></p> <div class="card" style="width: 18rem;"> <div class="card w-100 "> <div class="card-header">科目一覧</div> <p></p> <a href="{{ url('/kadai') }}"> 科目名(課題詳細) </a></li> @foreach($tags as $tag) <a href="/?tag={{ $tag['tagname'] }}" class='d-block'>{{ $tag['tagname'] }}</a> @endforeach <div class="card-body "> </div> </div> </div> </div> </div> </div> </div> <!-- col-md-3 --> <div style="position:absolute; top:80px; left:300px;'> <div class="col-md-8"> @yield('content') </div> </div> </div> </div> </div> <!-- row justify-content-center --> </div> </main> </div> @yield('footer') </body> </html>
返信ありがとうございます
Laravelに入るのが早すぎるなど重々承知です
まだ回答がついていません
会員登録して回答してみよう
