Решение типовых задач - Выпадающий список с категориями на AplineJS и запросом на сервер для получения подкатегорий

1.Select для родительской котегории и пустой элемент с id=sub_catalog_empty, куда будет вставлен select подкатегории на событие change родительской категории.
<select name="catalog" class="w-full">
 <option value="0">Выберите каталог</option>
  @foreach(App\Models\CatalogBook::whereNull('parent_id')->get() as $catalog)
   <option value="{{$catalog->id}}">{{$catalog->name}}</option>
  @endforeach
</select>
<div class="p-2">
 <div id="sub_catalog_empty"></div>
</div>

2.делаем маршрут для получения подкатегорий
Route::get('catalog/{catalog}/subcatalogs', [Controllers\CatalogController::class, 'subcatalogs']);

3. экшн subcatalogs
public function subcatalogs($catalog_book)
{
  $subcatalogs = CatalogBook::where('parent_id', $catalog_book)->get();
  return view('helpers.subcatalog', compact('subcatalogs'));
}

4. view helpers/subcatalog.blade

<select name="subcatalog" class="w-full">
    @foreach($subcatalogs as $subcatalog)
        <option value="{{$subcatalog->id}}">{{$subcatalog->name}}</option>
    @endforeach
</select>

5. Возвращаемся к Select-у родительской категории, и добавляем прослушиваетль @change
<select name="catalog" class="w-full" @change="
  const subCatalog = document.getElementById('sub_catalog_empty');
  const cat = $event.target.value;
  const response = await fetch('/catalog/'+cat+'/subcatalogs')
                            .then((response) => response.text())
                            .then((text) => {
                              subCatalog.innerHTML = text;
                            });
">
  @foreach(App\Models\CatalogBook::whereNull('parent_id')->get() as $catalog)
   <option value="{{$catalog->id}}">{{$catalog->name}}</option>
  @endforeach
</select>