Значение select неизменно, даже после визуального изменения
Есть периоды (месяц + год) и есть 2 select элемента для них. В зависимости от выбранного года - периоды фильтруются так, чтобы остались только те периоды, которые попадают в интервал. Суть проблемы: после фильтрации значения прокидываются в select'ы и визуально все на месте, но при изменении значения - реальные данные уходящие на сервер не изменяются. Предположим - отфильтровал за 2020 год, попали периоды с января по декабрь 2020, я выбираю в поле с: январь 2020, по: декабрь 2020 и на сервер улетает январь - январь, хотя визуально значение изменено на декабрь. Весь скрипт прилагаю.
$(document).change(function () {
var yearFrom = $('select[id="yearReportFrom"]').val();
var yearTo = $('select[id="yearReportTo"]').val();
var selectFrom = $('select[id="periodsReportFrom"]');
var selectTo = $('select[id="periodsReportTo"]');
filterPeriodsInSelect(yearFrom, yearTo, selectFrom, selectTo);
if (yearFrom < 2020 || yearTo < 2020) {
$('select[id="periodsReportFrom"]').attr('disabled', 'disabled');
$('select[id="periodsReportTo"]').attr('disabled', 'disabled');
} else {
$('select[id="periodsReportFrom"]').removeAttr('disabled');
$('select[id="periodsReportTo"]').removeAttr('disabled');
}
});
function filterPeriodsInSelect(yearFrom, yearTo, selectFrom, selectTo) {
if (yearFrom === yearTo) {
var filteredPeriods = filterPeriodsByYear(allPeriods, yearFrom.toString());
setPeriodsToSelect(selectFrom, filteredPeriods);
setPeriodsToSelect(selectTo, filteredPeriods);
} else {
setPeriodsToSelect(selectFrom, allPeriods);
setPeriodsToSelect(selectTo, allPeriods);
}
}
function filterPeriodsByYear(periods, year) {
var filteredPeriods = [];
for (const period of periods) {
if (period.label.includes(year))
filteredPeriods.push(period);
}
return filteredPeriods;
}
function setPeriodsToSelect(select, periods) {
select.empty();
$.each(periods, function(key,value) {
select.append($("<option></option>")
.attr("value", value.value).text(value.label));
});