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