When you first click on the select, it displays incorrectly
https://i.sstatic.net/Ax9T7j8J.png
But when you click on it a second time, it displays correctly
https://i.sstatic.net/UpW4krED.png
$(document).on("click", "#edit_afpDetalle_mes", function () {
updateSelectsMonth('#edit_tabla_afp_detalle');
});
$(document).on("click", "#btnEliminarFilaEdit", function () {
deleteRow(this);
});
function updateSelectsMonth(input_id) {
// Get all selected months in existing rows
var selectedMonths = [];
document.querySelectorAll(input_id + ' tbody select').forEach(function (select) {
if (select.value !== '') {
selectedMonths.push(select.value);
}
});
// Update each select in the table
document.querySelectorAll(input_id).forEach(function (select) {
select.querySelectorAll('option').forEach(function (option) {
// If the option is selected in another select, hide it
if (selectedMonths.includes(option.value) && option.value !== select.value) {
option.style.display = 'none';
} else {
option.style.display = 'block';
}
});
});
}
The select should display options like in the second image, but there is a delay where initially all options are shown and then quickly hidden except for the selected ones.