Quiero que un elemento de selección contenga una opción predeterminada que muestre una ventana emergente cuando se seleccione. Así que creé HTMLOptionElement y agregué un evento al detector de eventos onclick, pero el evento no se activa cuando se hace clic en la opción.
Aquí está mi código:
const selectDefaultOption = new Option(".. show popup ..."); selectDefaultOption.addEventListener("mouseup", () => { // ... show pop up }); document.querySelector("#select").appendChild(selectDefaultOption);¿Estoy haciendo algo mal? ¿O no es posible lograr lo que estoy tratando de hacer?
Conclusión y solución
Después de algunos intentos, llegué a la conclusión de que no existe una solución ordenada para simplemente activar un evento adjunto a una opción de selección.
Sin embargo, he logrado realizar una acción cuando se selecciona una opción específica (aunque no es tan elegante como era mi intención inicial).
La solución:
const selectElement = document.querySelector("#select"); const placeholderOption = new Option("<< select option >>", "<< select option >>", true, true); placeholderOption.style.display = "none"; // this option is never display in the selection and serves only as a placeholder selectElement.add(placeholderOption, null); const onclickOption = new Option("onclick option", "onclick option") onclickOption.onclick = () => alert("onlick option clicked!"); selectElement.add(onclickOption, null); let previousSelectedValue; selectElement.onmouseenter = event => { previousSelectedValue = event.target.value; event.target.value = placeholderOption.value; event.target.onmouseleave = event => { event.target.value = previousSelectedValue; }; } selectElement.oninput = event => { event.target.onmouseleave = undefined; // reset the onmouseleave so it doesn't change current value const selectedOption = event.target.selectedOptions[0]; if (selectedOption.onclick){ selectedOption.onclick(selectedOption.event); event.target.value = previousSelectedValue; // you may assign placeholderOption.value } }; <select id="select"> <option>option#1</option> <option>option#2</option> </select>Primero agrego eventListener al contenedor de selección. Como gatillo me enfoqué. Luego uso su código para crear un nuevo elemento de opción. A este elemento le asigno un nuevo eventListener que activa la alerta().
El EventListener asignado en las etiquetas de opciones en un elemento creado fallará en la mayoría de los navegadores. Por eso es correcto vincular EventListerner a Select Tag. Luego puede verificar qué campo es a través del campo de valor.
const s = document.getElementById('select'); let isLoaded = false; s.addEventListener('focus', () => { if (! isLoaded) { const selectDefaultOption = new Option(".. show popup ..."); selectDefaultOption.setAttribute('value', "popup"); s.appendChild(selectDefaultOption); } isLoaded = true; }); function callPopUp(event) { let s = document.getElementById('select'); if (s.value === 'popup') { alert('PopUp') } } select { width: 200px; background: gray; padding:10px; } <select id="select" onclick='callPopUp(event)'> <option value="123">123</option> <option value="456">456</option> </select>Nota
Junto con @Olafvolafka descubrimos que en la mayoría de los navegadores (Chrome, Opera) no es posible vincular con éxito un evento a la etiqueta/elemento de opción. No se activó ningún evento. Solo en Firefox se activaba un evento. Por lo tanto, tenemos que trabajar con una solución alternativa. Estado 01/2022.
Pondría el oyente en el elemento de selección y verificaría el valor (en lugar de poner un oyente en el elemento de opción directamente)
document.querySelector('select').addEventListener('change', e => { if (e.target.value === '2') console.log('The special option was chosen'); }) <select> <option value='1'>1</option> <option value='2'>Special</option> <option value='3'>3</option> </select>