Laravel　動的セレクトボックス

前提・実現したいこと

動的なセレクトボックスを実装したいです。
一つ目のセレクトボックスで、科目(tagsデーブル)を選択すると二つ目のセレクトボックスで一つ目で選んだ科目のみの課題(memosテーブル)を表示できるよう連動させたいです。

![]
![]

該当のソースコード

progress
1<div class="form-group row”>
2      <label for="memo">科目</label> 
3        <select name='tagname' class="form-control"  >
4        @foreach($tags as $tag)
5        <option value="{{ $tag['tagname']}}">{{ $tag['tagname']}}</option>
6        @endforeach
7          </select> 
8     <div>
9         <div class="form-group row”>
10            <label for="memo">課題</label> 
11             <select name='content' class="form-control"  >
12      @foreach($memos as $memo)
13     <option value="{{ $memo['content']}}">{{ $memo['content']}}</option>
14      @endforeach
15     </select> 
16

Homecontroller
1 public function progress()
2    {
3        $user = \Auth::user();
4        $memos = Memo::all();
5        $tags = Tag::all();
6
7        return view('progress',compact('user','memos','tags'));

Webphp
1Route::get('/progress', 'HomeController@progress')->name('progress');

試したこと

色々調べましたが、わかりませんでした。できなくて本当に困っています。
初心者で至らない点があると思いますが、よろしくお願いいたします。

補足情報

progressblade
1     
2  @extends('layouts.app')
3@section('content')
4
5
6<div class="row justify-content-center ml-0 mr-0 h-100">
7    <div class="card w-100">
8        <div class="card-header">進捗状況登録</div>
9       
10        <div class="card-body">
11            <form method='POST' action="/store2">
12    
13                 @csrf
14                <input type='hidden' name='user_id' value="{{ $user['id'] }}">      
15　　<div class="form-group row”>
16                    <label for="memo">科目</label> 
17                    
18                        <select name='tagname' id="tagname"　type="select" class="form-control"  >
19                            @foreach($tags as $tag)
20                            <option value="{{ $tag['tagname']}}">{{ $tag['tagname']}}</option>
21                            @endforeach
22                        </select> 
23                            <div>
24                                <div class="form-group row”>
25                                    <label for="memo">課題</label> 
26                                    
27                                        <select name='content' id="memo" type="select" class="form-control"  >
28                                            @foreach($memos as $memo)
29                                      
30                                            <option value="{{ $memo['content']}}">{{ $memo['content']}}</option>
31                                            @endforeach
32                                        </select> 
33   
34                    <div class="text-center">
35                <button type='submit' class="btn btn-danger btn-lg">登録する</button>
36                    </div>
37            </form>
38     </div>
39    </div>
40</div>
41@endsection
42
43@push('scripts')
44<script src="{{ asset('/js/progress.js') }}"　type="module"></script>
45@endpush
46
47

progressjs
1$(function() {
2// 「科目」のセレクトボックスが変更された場合
3$('#tagname').on('change', function() {
4  // value属性の値を取得
5  let tag_name_val = $(this).val();
6  // tag_name_valをHomeControllerへ渡す
7  $.ajax({
8    headers: {
9      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
10    },
11    type: "POST",
12    url: "/addContent",
13    dataType: "JSON",
14    data: {
15      val: tag_name_val
16    }
17  })
18  .done(function(data) {
19    $.each(data['memos'], function(index, value) {
20      // コントローラ側で取得した課題のデータをセレクトボックスに追加する
21      $('#memo').append($('<option>').val(value.id).text(value.name));
22    })
23  })
24.fail(function(jqXHR, textStatus, errorThrown){
25    console.log(jqXHR);
26    console.log(textStatus);
27    console.log(errorThrown);
28    });
29
30})
31})
32
33
34

app
1layoutsのapp.blade.php
2<!doctype html>
3<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <body bgcolor="black" text="white">
8    <!-- CSRF Token -->
9    <meta name="csrf-token" content="{{ csrf_token() }}">
10
11    <title>{{ config('app.name', 'SimpleNote') }}</title>
12
13    <!-- Scripts -->
14    
15    <script src="{{ asset('js/app.js') }}" defer></script> 
16    @yield('js') 
17
18    <!-- Fonts -->
19    <link rel="dns-prefetch" href="//fonts.gstatic.com">
20    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
21    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
22
23    <!-- Styles -->
24    
25    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
26    <link href="{{ asset('css/utility.css') }}" rel="stylesheet">
27    @yield('css')
28   
29    
30  
31<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
32    {{-- <script src="{{ asset('js/progress.js') }}" defer></script> --}}
33    @stack('scripts')
34  
35    
36   
37</head>
38<body>
39    <div id="app">　　　　
40        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
41            <div class="container">
42                <a class="navbar-brand" href="{{ url('/') }}">
43                    {{ config('app.name', 'Laravel') }}
44                </a>
45                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
46                    <span class="navbar-toggler-icon"></span>
47                </button>
48
49                <div class="collapse navbar-collapse" id="navbarSupportedContent">
50                    <!-- Left Side Of Navbar -->
51                    <ul class="navbar-nav mr-auto">
52
53                    </ul>
54
55                    <!-- Right Side Of Navbar -->
56                    <ul class="navbar-nav ml-auto">
57                        <!-- Authentication Links -->
58                        @guest
59                            <li class="nav-item">
60                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
61                            </li>
62                            @if (Route::has('register'))
63                                <li class="nav-item">
64                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
65                                </li>
66                            @endif
67                        @else
68                            <li class="nav-item dropdown">
69                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
70                                    {{ Auth::user()->name }} <span class="caret"></span>
71                                </a>
72
73                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
74                                    <a class="dropdown-item" href="{{ route('logout') }}"
75                                       onclick="event.preventDefault();
76                                                     document.getElementById('logout-form').submit();">
77                                        {{ __('ログアウト') }}
78                                    </a>
79
80                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
81                                        @csrf
82                                    </form>
83                                </div>
84                            </li>
85                        @endguest
86                    </ul>
87                </div>
88            </div>
89        </nav>
90
91        <main class="main">
92        @if(session('success'))
93            <div class="alert alert-success" role="alert">
94              {{ session('success') }}
95            </div>
96        @endif
97
98        <div class="card" style="width: 18rem;">
99            <ul class="list-group list-group-flush">
100              <li class="list-group-item">
101                <a href="{{ url('/mypage') }}"> マイページ </a>
102              </li>
103              <li class="list-group-item">
104                <a href="{{ url('/add') }}"> 科目登録 </a>
105              </li>
106              <li class="list-group-item">
107                  <a href="{{ url('/create') }}"> 課題作成 </a></li>
108              <li class="list-group-item">
109                  <a href="{{ url('/progress') }}"> 進捗状況登録 </a></li>
110            </ul>
111          </div>
112        </div>
113<p></p>
114          <div class="card" style="width: 18rem;">
115            <div class="card w-100 ">
116                <div class="card-header">科目一覧</div>
117            <p></p>
118                <a href="{{ url('/kadai') }}"> 科目名(課題詳細) </a></li>
119                @foreach($tags as $tag)
120                
121                <a href="/?tag={{ $tag['tagname'] }}" class='d-block'>{{ $tag['tagname'] }}</a>
122      @endforeach
123                
124                <div class="card-body ">
125                </div>  
126                </div>
127            </div>
128        </div>
129          
130
131        
132                </div>
133              </div>    
134            </div> <!-- col-md-3 -->
135        
136             <div style="position:absolute; top:80px; left:300px;'> 
137            <div class="col-md-8">
138                
139              @yield('content')
140            </div>
141            </div>
142        </div>
143        </div>
144          </div> <!-- row justify-content-center -->
145        </div>
146        </main>
147    </div>
148    @yield('footer')
149</body>
150</html>

m.ts10806

2021/12/23 03:45

正直なところLaravelに入るの早すぎると思います。「Web職人のためのフレームワーク」がキャッチコピーなので、現状で「何もわからない」のであれば、何かしらアドバイスされても「分からない」でしかなく、回答者の言ってることは絶対理解できません。「詳しく、コードを」と書いてる時点で質問ではなく作業依頼です。

前提・実現したいこと

該当のソースコード

試したこと

補足情報

関連した質問