How to scroll to the selected option on click of a button?

Question

When I click on the focus button I want the select box to automatically scroll and then show the selected option.I am unable to achieve it using focus. Is there any javascript or jQuery method which can help me fix this ?

    <!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>

Yeah, `scrollTo` isn't a jQuery method but a vanilla approach. — Shikkediel, Oct 30 '15 at 13:30
you have to choose one or use a different solution like hiding options that aren't selected — Shawn, Apr 02 '21 at 20:30

A. Wolff · Answer 1 · 2015-10-30T14:02:28.897

5

You can use scrollIntoView() DOM method:

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

EDIT: doesn't work on IE11 (other vs???)

edited Oct 30 '15 at 14:02

answered Oct 30 '15 at 13:10

A. Wolff

74,033
9
94
155

It didnt work. Can you please provide another solution ? – Karthik Oct 30 '15 at 13:27
It works for me, can you provide a sample where it is not working? What if more than one option selected? What is your expected behaviour? Etc... – A. Wolff Oct 30 '15 at 13:28
Hi. Only one option is selected. When i click the button then nothing happens. I want the select box to scroll and show me the selected option. – Karthik Oct 30 '15 at 13:32
Works here: https://jsfiddle.net/1oxb2f0j/ If doesn't work for you, then you are doing something wrong obviously. – A. Wolff Oct 30 '15 at 13:35
@Karthik that's correct, just tested it on IE11 and it doesn't scroll. Thanks for the feedback! – A. Wolff Oct 30 '15 at 14:00

score 2 · Answer 2 · edited Oct 30 '15 at 14:48

2

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

You can also use this, you can able to control scroll speed here.

edited Oct 30 '15 at 14:48

Shikkediel

5,195
16
45
77

answered Oct 30 '15 at 13:22

vinoth kumar

64
3

@Karthik You have to do some effort because obviously in answer's posted code, `indx` is defined, so what?! – A. Wolff Oct 30 '15 at 13:29
Ohh Sorry. indx is defined and this worked for me. Thanks vinoth kumar and Wolf – Karthik Oct 30 '15 at 13:35
2

Can you please explain why you multiplied index with 14 ? – Karthik Oct 30 '15 at 13:40
Scroll scrolls to a pixel. I assume his select shows 14 items at a time. So, for instance if the selected index is 10, you need to multiple 10x14 to scroll to pixel #140. – Shawn Apr 02 '21 at 20:30

Karthik · Accepted Answer · 2015-11-02T07:56:31.623

2

I wrote a simple script . This is a better answer because in my case, the contents of the select change dynamically so the scroll height is not a constant. Fiddle link : 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);
   });
});

edited Nov 02 '15 at 07:56

answered Nov 02 '15 at 07:32

Karthik

1,447
1
18
26

Great solution, but what if the select element's options are not displayed at the time of click? I'm sure your answer is 99% of the solution, but I can't find that last little piece. For example, if you remove the "style" and "multiple" properties, and move the code to an onClick of the select instead of onClick of the button. – A554551N May 10 '19 at 16:27

How to scroll to the selected option on click of a button?

3 Answers3

Linked