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

我试过这个：

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

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

在 Firefox 和 Chrome 中提供工作解决方案的帮助将不胜感激。

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

Answer 1

在单击下拉列表之前，我不想显示任何“真实”值

鉴于此声明，在评论中，您尝试做的事情是行不通的。 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>

Answer 2

下次请尝试在您的问题中创建一个片段。 这是一个（纯 js ）最小可重现示例。 它使用focusin处理程序和事件委托。 要更改所选选项，您只需将选择器的值设置为所需值即可。

fwiw：在焦点上设置选择值对用户来说可能很烦人。

 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`; } }