open a long <select> dropdown to specific option when the dropdown is first clicked

Question

I have a large dropdown list containing possible answer like this:

<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>

going from -100 to 100. When the dropdown is first clicked, I would like it to open (and select) at a prespecified value, ie at 0.

I have tried this:

$('#mySelect').one('focus', function() {
    $(this).children('option[value=0]').prop('selected',true);
});

and this works well in Chrome, but it doesn't work in Firefox, which is a problem for me. (edit) As mentioned in the comments, in Firefox above script selects the correct option, but dropdown is not scrolled to that value.

Help with a working solution in both Firefox and Chrome would be greatly appreciated.

Here is a fiddle of the problem: https://jsfiddle.net/monni/an4guvse/28/

Answer 1

I don't want to show any "real" value before the dropdown is clicked

Given this statement, in the comments, what you're attempting to do is not workable. The actions available on an options list within a select are vey limited, and this behaviour is non-standard.

I'd argue it's even counter intuitive and will confuse your users and cause more problems than it solves.

What you're attempting to achieve seems like it could be better solved by using a range input:

 $('#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>

Answer 2

Please try to create a snippet within your question next time. Here's is a ( plain js ) minimal reproducable example . It uses a focusin handler, and event delegation . To change the selected option, you can simply set the value of the selector to the desired value.

fwiw: setting a select value on focus may be annoying for users.

 document.addEventListener(`focusin`, handle); // create the selector dynamically document.body.insertAdjacentHTML(`beforeend`, `<select id="mySelect"> <option>------</option> ${[...Array(201)].map((v, i) => `<option value="${i-100}"}>${i-100}%</option>`).join(``)} </select>`); document.querySelector(`#mySelect`).value = `100`; function handle(evt) { if (evt.target.id === `mySelect`) { evt.target.querySelector(`[value='-50']`).scrollIntoView(); return evt.target.value = `-50`; } }