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.
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.
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.