javascript

Prevenir cambio en select con JavaScript

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.