與jQuery同步並使用向上/向下箭頭鍵時，滑塊（輸入范圍）和組合框（選擇）之間發生奇怪的交互

Question

我正在一個項目中，我需要將滑塊值與組合框值同步。 該代碼似乎有效。 但是當我在Firefox上嘗試兩個控件時，發現有些奇怪的地方。 我將移動滑塊，並在此過程中將重點放在組合框上。 然后，我將使用鍵盤上的向上/向下箭頭鍵，所選項目將按照我的期望向上/向下移動。 但是，當我第二次移動滑塊並重復使用向上/向下箭頭鍵時，忽略了滑塊選擇的項目，轉而使用之前由鍵選擇的項目。 我在所有5種主要瀏覽器的當前版本上嘗試了此操作，並且僅在Firefox上發現了此行為。 因此，我刪除了盡可能多的無關代碼，以嘗試排除我自己的錯誤。 JSFiddle在這里 。

我向Mozilla報告了該錯誤，以為我已經確定了Firefox問題。 但是我得到的答復是，使用普通的舊javascript時，我觀察到的問題消失了。 我正在使用jQuery 3.3.1。 我嘗試使用普通的舊JavaScript，但確實看不到問題。 我還嘗試了幾種較早的jQuery版本（v2和v1），每次都得到上述行為。 我想在嘗試向jQuery報告此問題之前，我想我可能會問我現有的代碼在一般情況下看起來像javascript聽起來是否合理，這不是我的強項。 我也想知道是否有任何方法可以使同步工作而不會放棄jQuery，而我確實需要將其用於其他目的。

這是下面的代碼。 請注意，盡管此代碼使用范圍輸入作為滑塊，但我的初始代碼實際上使用了jQuery UI滑塊。 我首先注意到了這個小部件的問題。 我恢復為范圍輸入，以消除jQuery UI可能的罪魁禍首。

假設我的代碼是正確的，並且存在錯誤（jQuery或Firefox），那么有人可以建議一種可行的解決方法來避免我報告的行為嗎？ 任何和所有建議都將受到歡迎和贊賞。

謝謝，克里斯

    <script>

    $(document).ready(function () {

        $("#coarse_slider").change(function() {
            $('#row_selector').val(this.value).trigger("focus");
        });

        $('#row_selector').change(function () {
            $("#coarse_slider").val(this.value);
        });

        $('#row_selector').val(8).trigger("change").trigger("focus");

    });

</script>

<div>
    <input id="coarse_slider" type="range" value="5" step="1" max="19" min="0" />
</div>
<div>
    <select size="20" name="row_selector" id="row_selector">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
        <option value="5">E</option>
        <option value="6">F</option>
        <option value="7">G</option>
        <option value="8">H</option>
        <option value="9">I</option>
        <option value="10">J</option>
        <option value="11">K</option>
        <option value="12">L</option>
        <option value="13">M</option>
        <option value="14">N</option>
        <option value="15">O</option>
        <option value="16">P</option>
        <option value="17">Q</option>
        <option value="18">R</option>
        <option value="19">S</option>
        <option value="20">T</option>
    </select>
</div>

Answer 1

你應該改變

<input id="coarse_slider" type="range" value="5" step="1" max="19" min="0" />

至

<input id="coarse_slider" type="range" step="0" max="19" min="0" />

和

<select size="20" name="row_selector" id="row_selector">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
  <option value="6">F</option>
  <option value="7">G</option>
  <option value="8">H</option>
  <option value="9">I</option>
  <option value="10">J</option>
  <option value="11">K</option>
  <option value="12">L</option>
  <option value="13">M</option>
  <option value="14">N</option>
  <option value="15">O</option>
  <option value="16">P</option>
  <option value="17">Q</option>
  <option value="18">R</option>
  <option value="19">S</option>
  <option value="20">T</option>
</select>

至

<select size="20" name="row_selector" id="row_selector">
  <option value="0">A</option>
  <option value="1">B</option>
  <option value="2">C</option>
  <option value="3">D</option>
  <option value="4">E</option>
  <option value="5">F</option>
  <option value="6">G</option>
  <option value="7">H</option>
  <option value="8">I</option>
  <option value="9">J</option>
  <option value="10">K</option>
  <option value="11">L</option>
  <option value="12">M</option>
  <option value="13">N</option>
  <option value="14">O</option>
  <option value="15">P</option>
  <option value="16">Q</option>
  <option value="17">R</option>
  <option value="18">S</option>
  <option value="19">T</option>
</select>

和

$('#row_selector').val(8).trigger("change").trigger("focus");

至

$('#row_selector').val(7).trigger("change").trigger("focus");

在您的jQuery中。

見小提琴 。