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

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

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

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

16550閲覧

動的なセレクトボックスを作成したい(Laravel, jQuery)

coffee912

総合スコア12

Laravel

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2020/07/03 15:38

前提・実現したいこと

Laravelで一つのセレクトボックスの選択によって、二つ目のセレクトボックスの内容が変わるようにしたいです。
具体的には、動物の種類(犬)を選択すると、二つ目のセレクトボックスに犬の詳細な種類の選択が出るというものです。
現状は二つのセレクトボックスを表示しているだけで、連動はできていません。
javascript、jQueryでどのように実現したら良いのでしょうか。調べると、セレクトボックスがハードコーディング
されている場合の方法はあるのですが、DBの値で作成されている場合どのように実現したら良いのかわかりません。
お手数ですがご教授お願いします。

該当のソースコード

php

1// Controller 2public function create() 3 { 4 $categoryList = Category::pluck('name', 'id'); 5 $subCategoryList = SubCategory::pluck('name', 'id'); 6 return view('posts.create', compact( 7 'categoryList', 'subCategoryList')); 8 } 9

php

1// モデル 2class Category extends Model 3{ 4 protected $fillable = ['name']; 5 6 // リレーション 7 public function subCategory() 8 { 9 return $this->hasMany(SubCategory::class); 10 }

categoryテーブル(一部)

idname
1
2

subCategoryテーブル(一部)

idcategory_idname
11チワワ
2トイプードル
32スコティッシュ・フォールド
42アメリカンショートヘア

php

1// View 2<form action="{{ route('post.store') }}"> 3 <div class="form-group col-sm-6"> 4 <label for="category">ペットの種類</label> 5 <select class="form-control" name="category_id" id="main"> 6 <option value="" style="display: none;">選択してください</option> 7 @foreach ($categoryList as $index => $name) 8 <option value="{{ $index }}">{{ $name }}</option> 9 @endforeach 10 </select> 11 <label for="category">ペットの詳細な種類</label> 12 <select class="form-control" name="sub_category_id" id="sub"> 13 @foreach ($subCategoryList as $index => $name) 14 <option value="{{ $index }}" data-val="">{{ $name }}</option> 15 @endforeach 16 </select> 17 </div> 18</form> 19

補足情報(FW/ツールのバージョンなど)

Laravel7

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

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

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

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

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

guest

回答4

0

ざっくりした動作の確認できるサンプル

  • mypage.html

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('#category').addEventListener('change',(e)=>{ 4 const url="api.php"; 5 const body=[["category",e.target.value]].reduce((x,y)=>(x.append(y[0],y[1]),x),new FormData()); 6 const method="post"; 7 fetch(url,{body,method}).then(x=>x.json()).then(data=>{ 8 document.querySelectorAll('#sub option').forEach((x,y)=>{ 9 if(y>0) x.parentNode.removeChild(x); 10 }); 11 Object.entries(data).forEach(x=>{ 12 var opt=Object.assign(document.createElement('option'),{value:x[0],textContent:x[1]}); 13 document.querySelector('#sub').appendChild(opt); 14 }) 15 }); 16 }); 17}); 18</script> 19 20<select name="category" id="category"> 21<option value="">--</option> 22<option value="1"></option> 23<option value="2"></option> 24</select> 25<select name="sub_category" id="sub"> 26<option value="">--</option> 27</select>
  • api.php

PHP

1<?PHP 2$list=[ 3 1=>[ 4 1=>"チワワ", 5 2=>"トイプードル", 6 ], 7 2=>[ 8 1=>"スコティッシュ・フォールド", 9 2=>"アメリカンショートヘア", 10 ], 11 ]; 12$category=filter_input(INPUT_POST,"category",FILTER_VALIDATE_INT); 13if(isset($list[$category])){ 14 print json_encode($list[$category],JSON_UNESCAPED_UNICODE); 15}else{ 16 print "{}"; 17}

※実際には受け取った$categoryをもとにSQLに問い合わせて、結果をJSONデータでmypage.htmlに戻す

投稿2020/07/04 01:38

yambejp

総合スコア114581

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

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

0

ベストアンサー

最近似たようなものを作りました。

親となるセレクトボックスをonChangeした際に、選択した項目をajaxでサーバーへgetリクエストで送信し、それを元にDBから取得した値をJSONで受け取って、それを子のセレクトボックスにセットするというものです。

なんとなくイメージ掴めますでしょうか。

投稿2020/07/03 16:57

編集2020/07/03 16:58
yuki84web

総合スコア1857

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

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

coffee912

2020/07/04 05:42

いただいた回答を参考に実装できました。 ありがとうございます!
m.ts10806

2020/07/04 05:54

であれば、こちらの回答がベストアンサーなのでは
guest

0

以下の方法で実装できました。

jQuery

1 2// セレクトボックスの連動 3 // 親カテゴリのselect要素が変更になるとイベントが発生 4 $('#parent').change(function () { 5 var cate_val = $(this).val(); 6 7 $.ajax({ 8 headers: { 9 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 10 }, 11 url: '/fetch/category', 12 type: 'POST', 13 data: {'category_val' : cate_val}, 14 datatype: 'json', 15 }) 16 .done(function(data) { 17 // 子カテゴリのoptionを一旦削除 18 $('#children option').remove(); 19 // DBから受け取ったデータを子カテゴリのoptionにセット 20 $.each(data, function(key, value) { 21 $('#children').append($('<option>').text(value.name).attr('value', key)); 22 }) 23 }) 24 .fail(function() { 25 console.log('失敗'); 26 }); 27 28 });

php

1Route::post('/fetch/category', 'PostController@fetch')->name('post.fetch'); 2

php

1 /** 2 * ajaxリクエストを受け取り、サブカテゴリを返す 3 */ 4 public function fetch(Request $request) { 5 $cateVal = $request['category_val']; 6 $subCategory = SubCategory::where('category_id', $cateVal)->get(); 7 return $subCategory; 8 }

投稿2020/07/04 05:34

編集2020/07/04 06:10
coffee912

総合スコア12

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

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

0

既に出ているやり方がベターかと思いますが、
optionを表示非表示切り替える やり方もあるのはあります。
classにカテゴリ情報を含ませておいて、選ばれたら全部非表示→カテゴリを含むものだけを表示
とかですね。

投稿2020/07/03 21:41

m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問