Сделать активными позиции в 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(чтоб даты все выводились, и были активными только те даты которые соответствуют работнику) или в представлении что-то поменять? И как это осуществить?