Dynamic Dropdowns route edit in Laravel

Hello, 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.

hupp

2 years ago

Level 11

@haschwalth Hey! I have demo of mine version you can go through and check its simple as it.

app/Http/Controllers/DepartmentController.php

namespace App\Http\Controllers;

use App\Models\Department;
use App\Models\Subdepartment;

class DepartmentController extends Controller
{
    public function index()
    {
        $departments = Department::all();
        $subdepartments = Subdepartment::all();

        return view('index', compact('departments', 'subdepartments'));
    }
}

index.blade.php

<!-- resources/views/index.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Department and Subdepartment Dropdowns</title>
</head>
<body>
    <h1>Select Department and Subdepartment</h1>

    <label for="department">Department:</label>
    <select id="department">
        <option value="">Select Department</option>
        @foreach ($departments as $department)
            <option value="{{ $department->id }}">{{ $department->name }}</option>
        @endforeach
    </select>

    <label for="subdepartment">Subdepartment:</label>
    <select id="subdepartment" disabled>
        <option value="">Select Subdepartment</option>
        @foreach ($subdepartments as $subdepartment)
            <option value="{{ $subdepartment->id }}">{{ $subdepartment->name }}</option>
        @endforeach
    </select>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const departmentDropdown = document.getElementById('department');
            const subdepartmentDropdown = document.getElementById('subdepartment');

            departmentDropdown.addEventListener('change', function() {
                const selectedDepartmentId = this.value;

                subdepartmentDropdown.innerHTML = '<option value="">Select Subdepartment</option>';
                subdepartmentDropdown.disabled = true;

                if (selectedDepartmentId !== '') {
                    const subdepartments = @json($subdepartments);
                    const filteredSubdepartments = subdepartments.filter(subdepartment => subdepartment.department_id == selectedDepartmentId);

                    for (const subdepartment of filteredSubdepartments) {
                        const option = document.createElement('option');
                        option.value = subdepartment.id;
                        option.textContent = subdepartment.name;
                        subdepartmentDropdown.appendChild(option);
                    }

                    subdepartmentDropdown.disabled = false;
                }
            });
        });
    </script>
</body>
</html>

@haschwalth Let me know your feedback after review.

1 like

haschwalth

2 years ago

Best Answer

Level 1

@hupp Thank you for your previous response. However, I have tried the suggested solutions, but they did not meet my expectations.

I have found the answer myself.

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

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

        while (subList.options.length) {
            subList.remove(0);
        }

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

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

            var defaultOption = new Option("Choose a Sub Department", "");
            subList.add(defaultOption);

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

                if (subDepartment.id == selectedSubDepartmentId) {
                    option.setAttribute('selected', 'selected');
                }

                subList.options.add(option);
            });

            $(subList).selectric('refresh');
        }
    }

    $(document).ready(function () {
        ChangedeptList();
    });
</script>

Please or to participate in this conversation.