Сделать активными позиции в select по условию

введите сюда описание изображения

Имеется select, который выводит даты, в которых рабочий будет выполнять своё задание. Сейчас выводятся только даты которые подтягиваются из БД, а нужно чтоб в выпадающем списке были ВСЕ даты, НО активными должны быть только даты, в которые рабочий имеет задание, другие даты должны быть "загреены".

Ниже приведу код:

<section class="sdp-menu">
    <select id="staff_id">
        <option selected="selected" disabled value="-1">Выбрать специалиста</option>
        @foreach (Specialist.StaffList staff in ViewBag.staffSelector)
        {
            <option value="@staff.StaffId">@staff.Name</option>
        }
    </select>
    <button id="get-tasks-btn">Выгрузить</button>
    @foreach (Specialist.StaffList staff in ViewBag.staffSelector) // Сдесь выводятся даты
    {
        <select class="staff-days" date-staff-id="@staff.StaffId" style="display:none">
            @foreach (DateOnly date in staff.Days)
            {
                <option value="@date">@date</option>
            }
        </select>
    }
</section>

Код откуда берутся даты и сопоставляются с выбранным рабочим:

public static List<StaffList> getStaffList(BDConnection context)
{
        var staffInfo = context.Employees.ToList();
        var passportTasksStaff = context.passport_tasks_staff.Where(c => c.start_date >= DateTime.Now.AddDays(-1)).ToList();
        
        List<StaffList> staffList = new();
        foreach (var staff in staffInfo)
        {
            List<DateOnly> staffTasks = passportTasksStaff.Where(c => c.staff_id == staff.Id)
            .Select(c => DateOnly.FromDateTime(c.start_date))
            .Distinct()
            .ToList();
            if (!staffTasks.IsNullOrEmpty())
            {
                staffList.Add(new StaffList { StaffId = staff.Id, Name = staff.Name, Days = staffTasks });
            }
        }

        return staffList;
}

И js:

$('#staff_id').on("change", function () {
    document.querySelectorAll('.staff-days').forEach(element => {
        if (element.getAttribute('date-staff-id') !== this.value)
            element.style.display = 'none';
        else element.style.display = 'inline';
    });
});

$('#get-tasks-btn').on("click", async function () {
    var staff_id = document.getElementById('staff_id').value;
    var date = document.querySelector('select[date-staff-id="' + staff_id + '"]').value;
    var params = new URLSearchParams({
        staff_id: staff_id,
        date: date
    });
    $.ajax({
        url: '/sdp/get-specialist-sdp?' + params.toString(),
        dateType: "json",
        method: "GET"
    }).done(function (data) {
        console.log(data);
        createTable(data);
    });
});

Что лучше, изменить код на js(чтоб даты все выводились, и были активными только те даты которые соответствуют работнику) или в представлении что-то поменять? И как это осуществить?


Ответы (0 шт):