Tengo una gran lista desplegable que contiene una posible respuesta como esta:
<select name="mySelect" id="mySelect" required="" > <option value="-100" > -100% </option> <option value="-99" > -99% </option> <option value="-98" > -98% </option> <option value="0" > 0% </option> <option value="101" selected = "" hidden = ""> ----- </option>pasando de -100 a 100. Cuando se hace clic en el menú desplegable por primera vez, me gustaría que se abra (y seleccione) en un valor preespecificado, es decir, en 0.
He intentado esto:
$('#mySelect').one('focus', function() { $(this).children('option[value=0]').prop('selected',true); });y esto funciona bien en Chrome, pero no funciona en Firefox, lo cual es un problema para mí. (editar) Como se menciona en los comentarios, en Firefox, el script anterior selecciona la opción correcta, pero el menú desplegable no se desplaza a ese valor.
Se agradecería mucho la ayuda con una solución que funcione tanto en Firefox como en Chrome.
Aquí hay un violín del problema: https://jsfiddle.net/monni/an4guvse/28/
No quiero mostrar ningún valor "real" antes de hacer clic en el menú desplegable
Dada esta declaración, en los comentarios, lo que está intentando hacer no es viable. Las acciones disponibles en una lista de opciones dentro de una select son muy limitadas y este comportamiento no es estándar.
Yo diría que incluso es contrario a la intuición y confundirá a sus usuarios y causará más problemas de los que resuelve.
Lo que intenta lograr parece que podría resolverse mejor utilizando una entrada de range :
$('#foo').on('input', e => $(e.target).next().text(e.target.value + '%')); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input type="range" min="-100" max="100" value="0" id="foo" /> <span></span>