Question

当我点击焦点按钮时，我希望选择框自动滚动然后显示所选的选项。我无法使用焦点实现它。是否有任何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>

Answer 1

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

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

编辑：不能在IE11上工作（其他vs ???）

Answer 2

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

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

Answer 3

我写了一个简单的脚本。这是一个更好的答案，因为在我的情况下，select的内容会动态更改，因此滚动高度不是常量。小提琴链接：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);
   });
});

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

3 个答案: