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

Question

前提・実現したいこと

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

該当のソースコード

// Controller
public function create()
    {
        $categoryList = Category::pluck('name', 'id');
        $subCategoryList = SubCategory::pluck('name', 'id');
        return view('posts.create', compact(
            'categoryList', 'subCategoryList'));
    }

//　モデル
class Category extends Model
{
    protected $fillable = ['name'];
   
    // リレーション
    public function subCategory()
    {
        return $this->hasMany(SubCategory::class);
    }

categoryテーブル（一部）

id	name
1	犬
2	猫

subCategoryテーブル（一部）

id	category_id	name
1	1	チワワ
2	１	トイプードル
3	2	スコティッシュ・フォールド
4	2	アメリカンショートヘア

// View
<form action="{{ route('post.store') }}">
     <div class="form-group col-sm-6">
       <label for="category">ペットの種類</label>
       <select class="form-control" name="category_id" id="main">
         <option value="" style="display: none;">選択してください</option>
         @foreach ($categoryList as $index => $name)
           <option value="{{ $index }}">{{ $name }}</option>
         @endforeach
       </select>
       <label for="category">ペットの詳細な種類</label>
       <select class="form-control" name="sub_category_id" id="sub">
         @foreach ($subCategoryList as $index => $name)
           <option value="{{ $index }}" data-val="">{{ $name }}</option>
         @endforeach
       </select>
     </div>
</form>

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

Laravel7

Answer 1

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

• mypage.html

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#category').addEventListener('change',(e)=>{
    const url="api.php";
    const body=[["category",e.target.value]].reduce((x,y)=>(x.append(y[0],y[1]),x),new FormData());
    const method="post";
    fetch(url,{body,method}).then(x=>x.json()).then(data=>{
      document.querySelectorAll('#sub option').forEach((x,y)=>{
        if(y>0) x.parentNode.removeChild(x);
      });
      Object.entries(data).forEach(x=>{
        var opt=Object.assign(document.createElement('option'),{value:x[0],textContent:x[1]});
        document.querySelector('#sub').appendChild(opt);
      })
    });
  });
});
</script>

<select name="category" id="category">
<option value="">--</option>
<option value="1">犬</option>
<option value="2">猫</option>
</select>
<select name="sub_category" id="sub">
<option value="">--</option>
</select>

• api.php

<?PHP
$list=[
  1=>[
    1=>"チワワ",
    2=>"トイプードル",
    ],
  2=>[
    1=>"スコティッシュ・フォールド",
    2=>"アメリカンショートヘア",
    ],
  ];
$category=filter_input(INPUT_POST,"category",FILTER_VALIDATE_INT);
if(isset($list[$category])){
  print json_encode($list[$category],JSON_UNESCAPED_UNICODE);
}else{
  print "{}";
}

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

Answer 2

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

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

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

Comments

[coffee912]

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

[m.ts10806]

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

Answer 3

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

// セレクトボックスの連動
  // 親カテゴリのselect要素が変更になるとイベントが発生
  $('#parent').change(function () {
    var cate_val = $(this).val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: '/fetch/category',
      type: 'POST',
      data: {'category_val' : cate_val},
      datatype: 'json',
    })
    .done(function(data) {
      // 子カテゴリのoptionを一旦削除
      $('#children option').remove();
      // DBから受け取ったデータを子カテゴリのoptionにセット
      $.each(data, function(key, value) {
        $('#children').append($('<option>').text(value.name).attr('value', key));
      })
    })
    .fail(function() {
      console.log('失敗');
    }); 
    
  });

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

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

Answer 4

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