与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中。

见小提琴 。