En este post te mostraré cómo prevenir que se seleccione otra opción en un select o lista desplegable de HTML usando JavaScript. Por ejemplo, evitar que el select cambie de opción si el usuario no acepta determinada cosa.
Lo vamos a hacer usando JavaScript puro.
Métodos probados
No sé si solo me pasa a mí, o si me habré equivocado. Pero no pude prevenir que el select cambiara con preventDefault pues cuando el evento change se desencadena, la opción ya ha cambiado.
Así que aunque quisiera detener el evento en el change, ya no se podía hacer más. Por lo tanto tuve que buscar otro modo.
Prevenir change
Lo que terminé haciendo fue guardar el último elemento seleccionado, y si en el change quería evitar el cambio, lo revertía a como estaba antes.
Para guardar el último elemento del select y así prevenir que la opción cambiara, simplemente escuché el evento click, guardaba el elemento seleccionado; y ahora en el change, si el usuario no aceptaba, entonces seleccionaba el último elemento seleccionado.
En código, se traduce a lo siguiente:
document.addEventListener("DOMContentLoaded", () => {
const $select = document.querySelector("#id_cliente");
let lastSelectedIndex = $select.selectedIndex;
$select.addEventListener("click", function () {
lastSelectedIndex = $select.selectedIndex;
});
$select.addEventListener("change", function (e) {
if (!confirm("Al cambiar de cliente se eliminará la lista de artículos. ¿Continuar?")) {
$select.selectedIndex = lastSelectedIndex;
return;
}
// Aquí el usuario sí ha aceptado, continúa con lo que harías normalmente
});
});En este caso si tú no quieres que el usuario seleccione otra opción, deshabilita o revierte a la opción seleccionada sin el confirm. Para este caso particular yo estaba mostrando una alerta de confirmación y si el usuario no aceptaba, debía revertir la opción seleccionada.
