首次单击下拉菜单时，打开一个长 <select> 下拉菜单到特定选项

Question

我有一个很大的下拉列表，其中包含如下可能的答案：

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

从 -100 到 100。首次单击下拉菜单时，我希望它以预先指定的值打开（和 select），即 0.

我试过这个：

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

这在 Chrome 中运行良好，但在 Firefox 中不起作用，这对我来说是个问题。（编辑）如评论中所述，在 Firefox 中上面的脚本 selects 是正确的选项，但下拉菜单未滚动到该值。

在 Firefox 和 Chrome 中提供有效的解决方案将不胜感激。

这是一个fiddle的问题：https://jsfiddle.net/monni/an4guvse/28/

Answer 1

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

鉴于此声明，在评论中，您尝试做的事情是行不通的。 select 中选项列表上可用的操作非常有限，并且此行为是非标准的。

我认为这甚至有违直觉，会让您的用户感到困惑，并导致比它解决的问题更多的问题。

您尝试实现的目标似乎可以通过使用 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>

首次单击下拉菜单时，打开一个长 <select> 下拉菜单到特定选项

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

html

javascript

jquery

focus