Многосвязная навигация по таблицам - Laravel

Question

Я пытаюсь показать списки, которые должны отображаться после навигации по соответствующим полям в таблице,

Я совершенно не понимаю, как это сделать, я думал о многоуровневом раскрывающемся меню, чтобы выполнить мою потребность, Но я не уверен, как пройти уровни на нем.

Все содержимое таблиц является динамическим, Вот информация, Таблицы, а именно Район, Муниципальный, Район и расположение

District 
| id 
| district_name

Municipal
| id
| district_id
| municipal_name 

Area
| id 
| area_name
| district_id
| municipal_id

Layout
| id 
| layout_name
| district_id
| municipal_id

Пожалуйста, помогите мне сломать логику этого,

Код, как я заставил меня просматривать первый уровень,

<select name="district_option" id="district_option" class="form-control col-sm-6">
            <option value="0" disabled="true" selected="true">------ Select District --------</option>
            @foreach ($districts as $key => $district)
            <option value="{{$district->id}}">{{$district->district_name}}</option>
            @endforeach
        </select>
    <div class="form-group form-inline border p-2">
    {{Form::label('municipal_option', 'District Option ',['class'=>'col-sm-4 h3'])}}


<select name="municipal_option" id="municipal_option" class="form-control col-sm-6">
            <option value="0" disabled="true" selected="true">------ Select District First--------</option>
        </select>

!!!!!Я хотел бы показать мои данные здесь, которые сопоставлены с муниципальным идентификатором !!!!

 <script>
        $('#district_option').on('change', function (e) {
            console.log(e);
            var municipal_id = e.target.value;
            var BASEURL = "{!! url('admin/engineers/') !!}";
            console.log(municipal_id);
            $.get(BASEURL + '/municipalview?municipal_id=' + municipal_id, function (data) {
                console.log(data);
                $('#municipal_option').empty();
                $('#municipal_option').append(
                    '<option value="0" disabled="true" selected="true">------ Select District First--------</option>'
                );
                $.each(data, function (index, municipalObj) {
                    $('#municipal_option').append('<option value="' + municipalObj.id + '"> ' +
                        municipalObj.municipal_name + ' </option>');
                })
            });
        });

    </script>

Есть ли другие подходы, я был бы рад изучить их тоже