如何在单击按钮时滚动到所选选项？答案

【问题标题】：How to scroll to the selected option on click of a button?如何在单击按钮时滚动到所选选项？
【发布时间】：2015-10-30 13:03:19
【问题描述】：

当我单击焦点按钮时，我希望选择框自动滚动，然后显示选定的选项。我无法使用焦点来实现它。是否有任何 javascript 或 jQuery 方法可以帮助我解决这个问题？

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/jquery-2.1.4.js"></script>
        <script>
            $(document).ready(function () {
                $("#focus").click(function () {
                    $("select#selectId").find(":selected").focus();
                });
            });
        </script>
    </head>
    <body>
        <select title="Title" id="selectId" style="width: 143px; height: 125px; overflow: scroll;" multiple="multiple">
        <option  value="1">1 </option>
        <option  value="2">2 </option>
        <option  value="3">3</option>
        <option  value="4">4</option>
        <option  value="5">5</option>
        <option  value="6">6</option>
        <option  value="7">7</option>
        <option  value="8">8</option>
        <option  value="9">9</option>
        <option  value="10">10</option>
        <option  value="11">11</option>
        <option  value="12">12</option>
        <option  value="13">13</option>
        <option  value="14">14</option>
        <option  value="15">15</option>
        <option  value="16">16</option>
        <option  value="17">17</option>
        <option  value="18">18</option>
        <option  value="19">19</option>
        <option  value="20">20</option>
        <option  value="21">21</option>
        <option  value="22">22</option>
        <option  value="23">23</option>
        <option  value="24">24</option>
        <option  value="25">25</option>
        <option  value="26">26</option>
        <option  value="27">27</option>
        <option  value="28">28</option>
        <option  value="31">31</option></select>
        <button type="button" id="focus">focus on selected</button>
    </body>
    </html>

【问题讨论】：

试试$("select#selectId").find(":selected").scrollTo();
如果选择 1 和 31 会怎样？
错误：对象不支持属性或方法'scrollTo'
是的，scrollTo 不是 jQuery 方法，而是普通方法。
您必须选择一个或使用其他解决方案，例如隐藏未选择的选项

标签： javascript jquery html css

【解决方案1】：

你可以使用scrollIntoView()DOM 方法：

$(document).ready(function () {
    $("#focus").click(function () {
        $("#selectId").focus().find(":selected")[0].scrollIntoView();
    });
});

编辑：不适用于 IE11（其他 vs???）

【讨论】：

它没有用。你能提供另一种解决方案吗？
它对我有用，你能提供一个不起作用的样本吗？如果选择了多个选项怎么办？您的预期行为是什么？等等……
嗨。只选择了一个选项。当我单击按钮时，什么也没有发生。我希望选择框滚动并显示所选选项。
在这里工作：jsfiddle.net/1oxb2f0j 如果对您不起作用，那么您显然做错了什么。
@Karthik 是正确的，刚刚在 IE11 上测试它并没有滚动。感谢您的反馈！

【解决方案2】：

$(document).ready(function () {
 $("#focus").click(function () {
     var indx = $("select#selectId").find(":selected").index();
     $('#selectId').animate({
        scrollTop: indx * 14
     }, 500);
 });
});

你也可以用这个，你可以在这里控制滚动速度。

【讨论】：

@Karthik 您必须付出一些努力，因为显然在答案发布的代码中，indx 已定义，那又如何？！
哦，对不起。 indx 已定义，这对我有用。感谢 vinoth kumar 和 Wolf
您能解释一下为什么将 index 乘以 14 吗？
滚动滚动到一个像素。我假设他的选择一次显示 14 个项目。因此，例如，如果所选索引为 10，则需要多个 10x14 才能滚动到像素 #140。

【解决方案3】：

我写了一个简单的脚本。这是一个更好的答案，因为在我的情况下，选择的内容会动态变化，因此滚动高度不是一个常数。小提琴链接：https://jsfiddle.net/962vxk4f/

$(document).ready(function () {
   $("#focus").click(function (e) {
      $selectId = $("#selectId");
      var $index = $selectId.find(":selected").index();
      var lastPos = 0;
      $selectId.children().each(function () { lastPos++; });
      var currScrollPos = ($index / lastPos) * parseInt($selectId[0].scrollHeight);
      $selectId.scrollTop(currScrollPos);
   });
});

【讨论】：

很好的解决方案，但是如果选择元素的选项在单击时没有显示怎么办？我确定您的答案是解决方案的 99%，但我找不到最后一点。例如，如果您删除“样式”和“多个”属性，并将代码移动到选择的 onClick 而不是按钮的 onClick。