首次单击下拉列表时，打开一个长的 <select> 下拉列表到特定选项答案

【问题标题】：open a long <select> dropdown to specific option when the dropdown is first clicked首次单击下拉列表时，打开一个长的 <select> 下拉列表到特定选项
【发布时间】：2021-12-29 10:12:32
【问题描述】：

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

<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。当第一次单击下拉菜单时，我希望它以预先指定的值打开（并选择），即 0。

我试过这个：

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

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

非常感谢您在 Firefox 和 Chrome 中提供有效的解决方案。

这里有一个问题：https://jsfiddle.net/monni/an4guvse/28/

【问题讨论】：

为什么将----- 选项作为默认选择值而不是0？
当框没有被点击时，它不应该显示任何值。
只需将0设为默认值即可。现代浏览器会自动滚动到列表中的这个选项来显示它，你不需要编写任何代码来做到这一点。即使您尝试过，它也不起作用，因为您无法以编程方式与选项列表本身进行交互。
另外，为什么要为此使用select？ range 输入似乎更有意义：jsfiddle.net/ux1p0d2v
好的，那么你应该edit 这个问题，因为你只说“它不起作用”但没有具体说明。部分操作确实有效

标签： javascript html jquery focus

【解决方案1】：

我不想在点击下拉菜单之前显示任何“真实”值

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

我认为它甚至是反直觉的，并且会混淆您的用户并导致比它解决的问题更多的问题。

您尝试实现的目标似乎可以通过使用range 输入更好地解决：

$('#foo').on('input', e =&gt; $(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>

【讨论】：

是的，我知道这不太实用，但这实际上是我的教授正在进行的基于网络的实验的一部分，他想使用这个下拉菜单来显示所有可能的答案。
那么不幸的是，您尝试做的事情以可靠的跨浏览器方式是不可能的。