Tengo una selección múltiple donde una opción debe ser exclusiva:
Estaba tratando de examinar la opción recién seleccionada, pero .val() me da la selección general.
$('#educationLevel').on('change', function(e) { var selection = $(e.target).val(); // This gives overall selection, not the just-selected one for my checks }¿Algun consejo?
Hay un hilo similar aquí, ¿Exclusión mutua para <opciones> en un <select>? . Necesitamos realizar un seguimiento de la matriz de selección actual y compararla con la última matriz de selección. Esto nos dirá qué se acaba de seleccionar.
Solución:
// 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]; }