¿Cómo activar una función antes del menú desplegable de seleccionar y cancelar el menú desplegable si se devuelve falso?
tal vez algo como esto:
document.querySelector('select').addEventListener('click',(e)=>{ if(check()==false) e.target.abortdropdown(); })
Puede colocar un contenedor alrededor del cuadro de selección y vincularlo al evento de clic. luego verifica su función check() y puede actuar sobre lo que sucede con el cuadro de selección. .
let check = () => {return false;}; const w = document.querySelector('#wrapper'); const s = w.querySelector('select'); w.addEventListener('click',(e) => { const os = s.querySelectorAll('option'); if(check() == false){ s.setAttribute('onclick',"abortdropdown()"); console.log('check() is false'); abortdropdown(os); } else { console.log('check() is true'); setdropdown(os); } }); function abortdropdown(os) { os.forEach((el) => { el.classList.add('hide'); }) } function setdropdown(os) { os.forEach((el) => { el.classList.remove('hide'); }) }
.hide { display:none; }
<div id="wrapper"> <select > <option class="hide">1</option> <option class="hide">2</option> <option class="hide">3</option> </select> </div>
Aquí hay un ejemplo mucho mejor. El envoltorio/contenedor principal (también puede ser su cuerpo) se activa al pasar el mouse por encima en este ejemplo (la carga o similar también cabría). Esto verifica su función check(). Y luego configuraría el cuadro de selección deshabilitado o eliminaría deshabilitado. Esto realmente debería hacer lo que quieres.
const parent = document.getElementById('parent'); const s = parent.querySelector('select'); let check = () => {return true;}; parent.addEventListener('mouseover', (e) => { if(check() == false){ s.setAttribute('disabled',"disabled"); console.log('check() is false'); } else { console.log('check() is true'); s.removeAttribute('disabled') } });
select[disabled] {pointer-events:none}
<div id="parent"> <select disabled> <option class="hide">1</option> <option class="hide">2</option> <option class="hide">3</option> </select> </div>
Creo que está buscando esto, https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault .
Entonces el caso interno debería serlo.
If (check==false) { e.target.preventDefault(); }
Y eso detiene el manejo predeterminado del evento.