Estoy trabajando en un formulario HTML abierto en hojas de Google con Google App Script.
Uso dos menús desplegables múltiples en forma de filtro. Usé un código para evitar ctrl + clic cuando el usuario selecciona opciones. El filtro funciona pero hay un error: cuando me desplazo hacia abajo y selecciono una opción, la opción está seleccionada pero el menú desplegable sube automáticamente.
Aquí está mi código con error ( https://stackoverflow.com/a/27578356/15994269 ):
// Allows to select mutiple options in a multiple select form without ctrl + click window.onmousedown = function (e) { var el = e.target; if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) { e.preventDefault(); // Toggle selection if (el.hasAttribute('selected')) el.removeAttribute('selected'); else el.setAttribute('selected', ''); // Hack to correct buggy behavior var select = el.parentNode.cloneNode(true); el.parentNode.parentNode.replaceChild(select, el.parentNode); } }Hice algunas investigaciones para resolver este problema e intenté fusionar algunas soluciones con mi código y creo que esas se están acercando a lo que estoy buscando:
https://stackoverflow.com/a/27056015/15994269
https://stackoverflow.com/a/60660662/15994269
Pero no tuve éxito.
Gracias por tus respuestas.
Creo que puede haber una mejor manera, pero puedes intentar:
let selectTop; window.onmousedown = function (e) { var el = e.target; if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) { e.preventDefault(); // toggle selection if (el.hasAttribute('selected')) el.removeAttribute('selected'); else el.setAttribute('selected', ''); selectTop = el.parentNode.scrollTop; } } document.querySelector('select').addEventListener('scroll', (e) => { if (selectTop) { e.target.scrollTop = selectTop }; selectTop = 0; }); <h4>From</h4> <div> <select name="sites-list" size="7" multiple> <option value="site-1">SITE</option> <option value="site-2" selected>SITE</option> <option value="site-3">SITE</option> <option value="site-4">SITE</option> <option value="site-5">SITE</option> <option value="site-6" selected>SITE</option> <option value="site-7">SITE</option> <option value="site-8">SITE</option> <option value="site-9">SITE</option> </select> </div>