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:

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 disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Relacionado:  JavaScript - Saber si cadena es Pangrama

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 608 suscriptores


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/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: