Dynamic Dropdowns with Database Values in Laravel

I’m currently facing an issue with dynamic dropdowns in my Laravel project. Specifically, I’m working on the user edit form, which requires a dynamic dropdown to be automatically selected based on the data stored in the database.

I want the Sub Department dropdown to be selected according to the sub_department_id in the users table when the edit page is loaded. I have tried various approaches, but none seem to work as expected.

Below is the relevant code for UsersController, Blade template, and the associated JavaScript function:

UsersController

public function edit(User $user)
    {
        $userRole = $user->roles->pluck('name')->toArray();
        $roles = Role::latest()->get();
        $selectedDepartmentId = $user->department_id;
        $selectedSubDepartmentId = $user->sub_department_id;
        $departments = Department::all();
        $subDepartments = SubDepartment::all();
        $joinDate = Carbon::parse($user->join_date)->format('Y-m-d');
        $is_active = $user->userStatus->is_active;

        return view('pages.master.users.edit', compact('user', 'userRole', 'roles', 'selectedDepartmentId', 'selectedSubDepartmentId', 'departments', 'subDepartments', 'joinDate', 'is_active'));
    }

edit.blade.php

<div class="row">
                                        <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                            <label for="departmentDropdown">Department</label>
                                            <select class="form-control selectric" name="department_id" id="departmentDropdown" onchange="ChangedeptList()" required>
                                                <option>Choose a Department</option>
                                                @if ($user->department_id == 1)
                                                    @foreach ($departments as $department)
                                                        <option value="{{ $department->id }}" {{ $department->id == $selectedDepartmentId ? 'selected' : '' }}>{{ $department->department_name }}</option>
                                                    @endforeach
                                                @else
                                                    @foreach ($departments->skip(1) as $department)
                                                        <option value="{{ $department->id }}" {{ $department->id == $selectedDepartmentId ? 'selected' : '' }}>{{ $department->department_name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            @if ($errors->has('department_id'))
                                                <span class="text-danger text-left">{{ $errors->first('department_id') }}</span>
                                            @endif
                                        </div>
                                        <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                            <label for="subdeptDropdown">Sub Department</label>
                                            <select class="form-control selectric" name="sub_department_id" id="subdeptDropdown" required>
                                                <option>Choose a Sub Department</option>
                                            </select>
                                            @if ($errors->has('sub_department_id'))
                                                <span class="text-danger text-left">{{ $errors->first('sub_department_id') }}</span>
                                            @endif
                                        </div>
                                    </div>

Javascript

<script>
        var departments = {!! $departments !!};
        var subDepartments = {!! $subDepartments !!};
        var selectedDepartmentId = {!! json_encode($selectedDepartmentId) !!};
        var selectedSubDepartmentId = {!! json_encode($selectedSubDepartmentId) !!};

        function setSelectedOption(selectElement, selectedValue) {
            for (var i = 0; i < selectElement.options.length; i++) {
                if (selectElement.options[i].value === selectedValue) {
                    selectElement.selectedIndex = i;
                    break;
                }
            }
        }

        function ChangedeptList() {
            var deptList = document.getElementById("departmentDropdown");
            var subList = document.getElementById("subdeptDropdown");
            var selDept = deptList.options[deptList.selectedIndex].value;

            while (subList.options.length > 1) {
                subList.remove(1);
            }

            var selectedDepartment = departments.find(function(department) {
                return department.id == selDept;
            });

            if (selectedDepartment && subDepartments.length > 0) {
                var selectedSubDepartments = subDepartments.filter(function(subDepartment) {
                    return subDepartment.department_id == selDept;
                });

                selectedSubDepartments.forEach(function(subDepartment) {
                    var option = new Option(subDepartment.sub_department_name, subDepartment.id);
                    subList.options.add(option);
                });

                $(subList).selectric('refresh');
                
                setSelectedOption(subList, selectedSubDepartmentId); 
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            ChangedeptList();
        });
    </script>

If anyone has encountered a similar issue or knows how to correctly selected dynamic dropdown based on database values, I would greatly appreciate your insights and suggestions.

Thank you in advance for your time and assistance.