تمرین جلسه82، پرکردن فیلدهای همه دسته بندی ها با Ajax

سلام بر استاد عزیز و گرامی
من با ایده گرفتن از کدی که شما در جلسه 82 نوشتید و همچنین با کمک از هوش مصنوعی ،تمرینی که فرمودید را انجام دادم.

//javascript

async function loadCategories(selectId, parentId) {
    const selectElement = document.getElementById(selectId);
    if (!selectElement) return;

    let url = '/Admin/Categories/GetCategories';
    if (parentId !== null && parentId !== undefined && parentId !== '') {
        url += `?parentId=${parentId}`;
    }

    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('خطا در دریافت داده');
        const data = await response.json();

        selectElement.innerHTML = '<option value="">لطفا انتخاب کنید</option>';

        data.forEach(item => {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.title;
            selectElement.appendChild(option);
        });
    } catch (error) {
        console.error('خطا در بارگذاری دسته‌بندی‌ها:', error);
        alert('مشکلی در بارگذاری دسته‌بندی‌ها رخ داد.');
    }
}

function clearSelect(selectId) {
    const selectElement = document.getElementById(selectId);
    if (selectElement) {
        selectElement.innerHTML = '<option value="">لطفا انتخاب کنید</option>';
    }
}

window.onload = function() {
    loadCategories('main-category', null);

    const mainSelect = document.getElementById('main-category');
    if (mainSelect) {
        mainSelect.addEventListener('change', function() {
            const selectedValue = this.value;
            if (selectedValue) {
                loadCategories('sub-category', selectedValue);
            } else {
                clearSelect('sub-category');
            }
            clearSelect('final-category');
        });
    }

    const subSelect = document.getElementById('sub-category');
    if (subSelect) {
        subSelect.addEventListener('change', function() {
            const selectedValue = this.value;
            if (selectedValue) {
                loadCategories('final-category', selectedValue);
            } else {
                clearSelect('final-category');
            }
        });
    }
};

جمعا از 3 تابع استفاده کردم و هیچ تغییری در کدهای صفحه view ندادم. 

 توضیح مختصر آن در زیر آمده است:
۱. تابع loadCategories(selectId, parentId)
این تابع وظیفه دارد یک دراپ‌داون (select) را با لیست دسته‌بندی‌های متناسب با  parentId پر کند. به عبارت دیگر، بر اساس شناسه والد، دسته‌بندی‌های فرزند آن را از سرور دریافت و در المان مشخص‌شده نمایش می‌دهد.
 

۲. تابع clearSelect(selectId)

این تابع یک دراپ‌داون را به حالت اولیه بازمی‌گرداند؛ یعنی فقط گزینه پیش‌فرض با متن «لطفا انتخاب کنید» در آن باقی می‌ماند و سایر گزینه‌ها حذف می‌شوند.زمانی که کاربر گزینه‌ای را در دراپ‌داون بالادستی تغییر می‌دهد، انتخاب‌های قبلی در دراپ‌داون‌های پایین‌دست دیگر معتبر نیستند، بنابراین باید پاک شوند تا کاربر مجبور شود انتخاب جدیدی انجام دهد.

۳. رویداد window.onload

پس از بارگذاری کامل صفحه، عملیات اولیه شامل بارگذاری دسته‌بندی‌های اصلی و اتصال شنونده‌های رویداد به دراپ‌داون‌ها انجام می‌شود.