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

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

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

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

PHP

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

データベース設計

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

リストボックス

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

受付中

Laravel 動的セレクトボックス

ria_ria
ria_ria

総合スコア4

Laravel

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

PHP

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

データベース設計

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

リストボックス

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

1回答

0評価

0クリップ

578閲覧

投稿2021/12/23 02:48

編集2022/01/12 10:55

前提・実現したいこと

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

イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2021/12/23 03:45

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

2021/12/23 06:38

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

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Laravel

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

PHP

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

データベース設計

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

リストボックス

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