質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

データベース設計

データベース設計はデータベースの論理的や物理的な部分を特定する工程です。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

Q&A

1回答

6087閲覧

Laravel 動的セレクトボックス

ria_ria

総合スコア4

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

データベース設計

データベース設計はデータベースの論理的や物理的な部分を特定する工程です。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

0グッド

0クリップ

投稿2021/12/23 02:48

編集2021/12/26 13:30

前提・実現したいこと

動的なセレクトボックスを実装したいです。
一つ目のセレクトボックスで、科目(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>

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/12/23 03:45

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

2021/12/23 06:38

返信ありがとうございます Laravelに入るのが早すぎるなど重々承知です
guest

回答1

0

動的にセレクトボックスの値を変更するにはAjaxの処理を書く必要があると思います。
JS内に「tagname」や「memo」などのidを勝手に書きましたが、自分のコードに合わせて読み取ってください。
またコードを読み取ったり動かす中で上手くいかなければ再度質問していただけたらと思います。

処理の流れとしては以下の通りです。

  1. 「科目」セレクトボックスにて値を選択
  2. 値が変更された際に、Ajaxの処理($.ajaxの部分)によってコントローラへ値を送信
  3. コントローラ内へ送信された値を元に、該当する「課題」の値を取得し、JSに返却
  4. JSにて「課題」セレクトボックスに、該当する値を追加

Webphp

1Route::post('/addContent', 'HomeController@addContent')->name('add.content');

HomeController

1public function addContent(Request $request) 2{ 3 $tagNameVal = $request->input('val'); 4 $memos = Memo::where('tag_id', $tagNameVal)->get(); 5 6 return [ 7 'memos' => $memos, 8 ]; 9}

jQuery

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() { 25 // 失敗した際の処理を記述 26 }) 27 }) 28}) 29

投稿2021/12/26 00:27

super-sub

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ria_ria

2021/12/26 02:31

ご丁寧にありがとうございます。 ”JS内に「tagname」や「memo」などのidを勝手に書きましたが、自分のコードに合わせて読み取ってください” ここのidとは、どこを読み取ればいいのでしょうか。 また、JQueryの記述はBlade内で @section('scripts') <script type="text/javascript"> </script> @endsection このような記述でよろしかったでしょうか。 初歩的な質問で申し訳ありません。回答いただけましたら幸いです。 よろしくお願いいたします。
super-sub

2021/12/26 02:41

私がJS内で$('#tagname')や$('#memo')といった記述をしましたが、 「#」はhtmlファイル(今回はbladeファイル)のid='tagname'と設定されているタグを取得するという意味です。 したがって<select id="tagname"></select>のように追加でidを設定する必要があるので、 idの値はria_riaさんが必要に応じて設定する内容を変えてくださればよかったです。 またblade内に直接書くのであれば@sectionは書かずに<script></script>の中に処理を書けば良いかと思います。 コードの見やすさを取るのであればJSファイルを新たに作成して書いてみても良いかもしれません。
ria_ria

2021/12/26 03:32 編集

ありがとうございます。 select idを設定しました。<script></script>の中に、記述しました。 bladeファイルは、layoutsを継承しているものですが、問題なくできるものなのでしょうか。実行してみましたが、うまくいきませんでした、、、、、何度も質問してすみません。
super-sub

2021/12/26 04:34

でしたら、 layoutsに@stack('scripts')、 progressの@sectionの外に @push('scripts') <script src="{{ asset('jsファイルのパス') }}"></script> @endpush を書いて実行してみてください。 原因を見るためにもデベロッパーツールのconsoleを見ても良いかもしれません。
super-sub

2021/12/26 04:39

もしよければ、実行したコードとエラー内容を補足に追記していただくと状況を理解しやすいです。
ria_ria

2021/12/26 05:37

ありがとうございます。 書いて実行してみました。そしてエラー内容等、追記をしました。 ご教授いただけますでしょうか。
super-sub

2021/12/26 05:42

@push('scripts') <script src="{{ asset('/js/progress.js') }}" type="module"></script> @endpush に変更してみましょうか
ria_ria

2021/12/26 05:52

お返事ありがとうございます。 変更してみましたが、何も変化がなかったみたいです、、、、
super-sub

2021/12/26 06:39 編集

エラー文を見たいです
ria_ria

2021/12/26 06:59

すみません載せたつもりでいました????‍♀️ progress.js:1 Uncaught ReferenceError: $ is not defined at progress.js:1 (anonymous) @ progress.js:1
super-sub

2021/12/26 07:12

headタグの@stack('script')の上に以下のコードを貼ってみてください。 jQueryを使うには以下のコードが必要になります <script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
ria_ria

2021/12/26 07:32

ありがとうございます、、????‍♀️ そこのエラーは消えたものの、、 連動せずです、、、違うエラーが出ているので画像を追加させていただきました????‍♀️
super-sub

2021/12/26 08:37 編集

layouts/app.blade.php内の処理を以下のように修正してみてください。 <script src="{{ '/js/app.js' }}" defer></script>  →<script src="{{ asset('js/app.js') }}" defer></script> <link href="{{ '/css/app.css' }}" rel="stylesheet">  →<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ '/css/utility.css' }}" rel="stylesheet">  →<link href="{{ asset('css/utility.css') }}" rel="stylesheet"> Failed to load resource: the server responded with a status of 404 (Not Found)というのは指定ファイルが見つからないといっており、パスやファイル名が間違っている可能性があります。
ria_ria

2021/12/26 09:15

ありがとうございます。 修正しました。 セレクトボックスについては、エラーもなく動作もしないです、、 何か他に原因があるんですかね、、
super-sub

2021/12/26 09:17

エラーが無くなったのはよかったです。 <select>のidを「""」(ダブルクォーテーション)で囲っていないのが気になりました
ria_ria

2021/12/26 09:33

ありがとうございます。 なるほど、””をつけました。修正後も特に変わらなかったです????‍♀️???? もう少し検討してみます、、
super-sub

2021/12/26 10:00 編集

エラーの原因を確認したいので、jsファイルのfail以下を下記のコードに書き換えていただいて、再度実行してもらって良いですか? うまく実行されなかったらコンソールにエラーの内容が表示されるので、その状況を教えてください。 fail(function(jqXHR, textStatus, errorThrown){ console.log(jqXHR); console.log(textStatus); console.log(errorThrown); }); また、初めに提示していただいたコードを修正してしまっていて最新のコードがわからないため、エラーを解消できるたびに更新していただいてもよろしいでしょうか。
ria_ria

2021/12/26 12:15

ありがとうございます。 更新します。
ria_ria

2021/12/26 12:27

補足情報のコードを更新しました、、 また先程のエラーが、、
super-sub

2021/12/26 12:36

utility.cssでエラーが起こっています パスは間違っていませんか? もしasset()を使ってエラーが起こってしまったなら前の書き方に戻してみてください
ria_ria

2021/12/26 12:53

utility.cssファイル事態がなかったです、、チュートリアルで作成したのでよくわかっていませんが、支障がなさそうですので消しました。すみません????‍♀️ progress.jsの方で、エラーが出ました。 Uncaught TypeError: $.ajax(...).done(...).$fail is not a function at HTMLSelectElement.<anonymous> (progress.js:24) at HTMLSelectElement.dispatch (jquery-1.12.1.min.js:3) at HTMLSelectElement.r.handle (jquery-1.12.1.min.js:3)
super-sub

2021/12/26 13:09

.fail()ではなく$.fail()と書いてあるのが気になりました 修正してみてください
ria_ria

2021/12/26 13:32

ありがとうございます。 エラーは消えました。
super-sub

2021/12/26 13:55

もしjsエラーが出なくともうまく動かないようでしたら、デベロッパーツールのNetworkでエラーが出ているはずです Networkの中のAllの中のphpファイルを選択するとエラー箇所が判ります
ria_ria

2021/12/26 14:17

そんなやり方があるのですね。 Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException The GET method is not supported for this route. Supported methods: POST. http://127.0.0.1:8003/addContent このようなエラーが出ました。
super-sub

2021/12/26 15:26

POST送信しか対応していないと言っています ajax処理内のtypeが"POST"になっているか確認してみてください またエラーが出た際は、どんなことをしたらエラーが出たのか背景も教えてくださると原因を発見しやすいです
ria_ria

2021/12/26 15:30

POSTになっております ”Networkの中のAllの中のphpファイルを選択するとエラー箇所が判ります”こちらを試したらエラーがわかりました。
ria_ria

2021/12/27 05:20

jquery-1.12.1.min.js:4 POST http://127.0.0.1:8000/addContent 419 (unknown status) ネットワークエラーの見方をまちがておりまして、このように表示されておりました。
ria_ria

2021/12/27 05:26

上記のコメントの件は勘違いでしたすみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問