Lalaravelのviewでセレクトボックスの連携をしたい

前提

現在、Laravel8にて商品一覧ページを作成しています。
そこに、２つのセレクトボックスを配置し、親カテゴリのセレクトボックスと子カテゴリのセレクトボックスを作っています。
親カテゴリには、primary_categoriesテーブルからidとnameを取得し、Controllerからviewに渡しています。secondary_categoriesカテゴリという子カテゴリのテーブルも存在します。
２つはリレーションで繋がっています。
view側は商品一覧ページを表示していて、productsテーブル(商品情報)としてsecondary_category_idカラム(secondary_categoriesのid)を持っています。

primary_categoriesテーブル

id	name
1	雑貨
2	雑貨
3	アート

secondary_categoriesテーブル

id	name	primary_category_id
1	パン	1
2	スウィーツ	1
3	お弁当	1
4	生活雑貨	2
5	アクセサリー	2
6	絵	3
7	音楽	3

実現したいこと

上記の商品一覧ページに、親カテゴリのセレクトボックスを選択すると、動的に子カテゴリのセレクトボックスの内容が親カテゴリの選択によって変わるようにしたいです。
色々ネットで調べてみたのですが、HTMLではJavaScriptを使用して動的に表示を変える、という所はいくつか見つかったのですが、Controllerから渡された親カテゴリと子カテゴリをどうやってJavaScriptで操作させるかのコーディングで悩んでいます。
ネットにはjQueryでの情報はいくつかあったのですが、
前提条件としてjQueryは利用しないというのがありますので、JavaScriptで実装したいです。

該当のソースコード

ProductController.php
indexメソッド内
$products = Product::select('id','name','secondary_category_id')->get();
$categories = PrimaryCategory::with('secondary')->get();
$s_categories = SecondaryCategory::select('id','name')->get();

return view('user.item.index', compact('products','categories','s_categories'));

user/item/index.blade.php
<select id="p_category" class="mb-2 lg:mb-0 lg:mr-2 rounded">
    <option value="0" @if(\Request::get('p_category') === '0') selected @endif>全て</option>
     @foreach($categories as $p_category)
       <option value="{{ $p_category->id}}" @if(\Request::get('p_category') == $p_category->id) selected @endif>
        {{ $p_category->name }}
       </option>
     @endforeach
</select>

<select id="s_category" class="mb-2 lg:mb-0 lg:mr-2 rounded">
  <option value="0" @if(\Request::get('s_category') === '0') selected @endif>全て</option>
  @foreach($s_categories as $s_category)
   <option value="{{ $s_category->id}}" @if(\Request::get('s_category') == $s_category->id) selected @endif>
       {{ $s_category->name }}
   </option>
  @endforeach
</select>

上記のコードはとりあえず親カテゴリと子カテゴリを表示するために用意してあるもので、
完成させたいのは、親カテゴリ選択によって子カテゴリを絞り込み表示させたいです。