打開一個長<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`; } }