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, i.e. 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/
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>