I have a Multi-Select where one option must be exclusive:
I was trying to examine the just-selected option, but .val() gives me the overall selection.
$('#educationLevel').on('change', function(e) {
var selection = $(e.target).val();
// This gives overall selection, not the just-selected one for my checks
}
Any tips?
There's a similar thread here, Mutual exclusion for <option>s in a <select>? . We need to keep track of the current selection array and diff it with the latest selection array. This will tell us what has just been selected.
Solution:
// Global Var:
// To implement an exclusive option in a MultiSelect dropdown,
// we need to keep track of the current selection (a global var here)
// and diff this array with the latest selection array in change() event.
var currSel = $('#educationLevel').val();
// Change Event Definition
$('#educationLevel').on('change', function() {
var newSel = $(this).val();
// Get diff from currSel; a 1-element array expected.
// Diff in arrays: see: https://stackoverflow.com/a/33034768/1005607
var diff = newSel.filter(x => !currSel.includes(x));
// If exclusive option just got selected, delete all others
if (diff.length) {
if (diff[0] === '405') { // '405' is my exclusive option
// If exclusive option just got selected ("405"), deselect all others
// in modified selection array
newSel = ['405'];
} else {
// If non-exclusive option just got selected, ensure that the exclusive option
// is not in the modified selection array
newSel = newSel.filter(el => el !== '405');
}
// Set dropdown to the modified new selection array
$('#educationLevel').val(newSel);
}
// Clone latest selection array into current selection array
currSel = [...newSel];
}