2

What I am trying to achieve is when you click on the dropdown menu and all the options are displayed, automatically to scroll down to specific option (which will be determine prior that), but without selecting it.Just for utility, because I might have a list with a lot of options and I need to be able to automatically scroll down to a specific one when the user click the select drop-down menu. Is that possible?

HTML

<div id="container">
    <select name="" id="select">
        <option value="">item-1</option>
        <option value="">item-2</option>
        <option value="">item-3</option>
        <option value="">item-4</option>
        <option value="">item-5</option>
        <option value="">item-6</option>
        <option value="">item-7</option>
        <option value="">item-8</option>
        <option value="">item-9</option>
        <option value="">item-10</option>
        <option value="">item-11</option>
        <option value="">item-12</option>
        <option value="">item-13</option>
        <option value="">item-14</option>
        <option value="">item-15</option>
        <option value="">item-16</option>
        <option value="">item-17</option>
        <option value="">item-18</option>
        <option value="">item-19</option>
        <option value="">item-20</option>
        <option value="">item-21</option>
        <option value="">item-22</option>
        <option value="">item-23</option>
        <option value="">item-24</option>
        <option value="">item-25</option>
        <option value="">item-26</option>
        <option value="">item-27</option>
        <option value="">item-28</option>
        <option value="">item-29</option>
        <option value="desiredOne">item-30</option>
        <option value="">item-31</option>
        <option value="">item-32</option>
        <option value="">item-33</option>
        <option value="">item-34</option>
        <option value="">item-35</option>
        <option value="">item-36</option>
        <option value="">item-37</option>
        <option value="">item-38</option>
        <option value="">item-39</option>
        <option value="">item-40</option>
    </select>
</div>

JS

$(document).ready(function () {
    var select = $('select');
    $('#select').on('click',
        function() {
            select.val("desiredOne")[0].scrollIntoView();
        });
});

The problem here is that the option is being "marked" in the field but it is not actually scrolling down to that option.

screenshot

Kristiyan Kyosev
  • 107
  • 2
  • 8
  • Does this answer your question? [Scroll down to selected option on button click using jquery](https://stackoverflow.com/questions/45320734/scroll-down-to-selected-option-on-button-click-using-jquery) – Alon Pini Dec 09 '19 at 17:29
  • This link might help you. https://www.encodedna.com/javascript/select-element-set-focus-or-expand-options-on-page-load-using-javascript.htm – Naveen Chandra Tiwari Dec 09 '19 at 17:29
  • @AlonPini - [That question](https://stackoverflow.com/questions/45320734/scroll-down-to-selected-option-on-button-click-using-jquery) doesn't use a drop-down. The OP's is a drop-down. – T.J. Crowder Dec 09 '19 at 17:31
  • @Alon Pini exactly, I checked this post before asking the question. When is multi line dropdown everything is working fine, all the option elements has value for the offsetTop property. In my case is a normal one-line dropdown select element and for the all option elements inside the offsetTop property is 0 – Kristiyan Kyosev Dec 10 '19 at 00:33
  • @Naveen Chandra Tiwari nothing on that page unfortunatelly is related to my problem – Kristiyan Kyosev Dec 10 '19 at 00:34
  • Does this answer your question? https://stackoverflow.com/questions/7205702/how-to-scroll-a-select-list-with-javascript-or-jquery – JotaPardo Dec 15 '21 at 05:37

2 Answers2

0

Your select.val("desiredOne")[0].scrollIntoView(); code is selecting the option via val, then trying to scroll the select (not one of its options) into view, because when val is a setter, it returns the jQuery set you called it on. (E.g., select.val("desiredOne") returns select, which you index into and then call scrollIntoView on.)

Unfortunately, select lists in general and drop-down ones in particular offer very little control over the list of options. I don't think there's any way for you to scroll the list down (or even reliably get an event when the list is dropped down), certainly not cross-browser. You'd have to effectively reimplement a select list to do this.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I was thinking the same think, but I was secretly hoping I am wrong. About the selector, I tried different ones but even when I aquire the native DOM option element, I can`t scroll down to it because when you have a one line – Kristiyan Kyosev Dec 10 '19 at 00:27
  • @KristiyanKyosev - Yeah. :-| – T.J. Crowder Dec 10 '19 at 07:07
  • @ T.J. Crowder I was thinking, you know how when you open the select element and the dropdown options are displayed and you klick some letter on your keyboard, say "p" and it scrolls down to the first option starting with "p". Can that be used in some way, how I can programitaclly simulate sending key to the select element? – Kristiyan Kyosev Dec 10 '19 at 14:40
  • @KristiyanKyosev - It's possible to send a synthetic keyboard event (whether the browser would respect it is another question), but the problem is: You don't get an event for it when the user opens the drop-down, so you don't know when to send it. `click` is fired for other reasons, so if you did it on `click` you'd be doing it at times you shouldn't, and separately I don't think it's fired reliably cross-browser when you do open the drop-down. I suspect this lack of control is a big part of why you see so many custom drop-downs. – T.J. Crowder Dec 10 '19 at 15:39
  • 1
    @ T.J. Crowder I see, obviously we have to either drop this requirement or either go with custom – Kristiyan Kyosev Dec 10 '19 at 17:22
0

I created a fiddle for you. This should help you.

HTML

<div id="container">
<select name="" id="select">
    <option value="1">item-1</option>
    <option value="2">item-2</option>
    <option value="3">item-3</option>
    <option value="4">item-4</option>
    <option value="5">item-5</option>
    <option value="6">item-6</option>
    <option value="7">item-7</option>
    <option value="8">item-8</option>
    <option value="9">item-9</option>
    <option value="10">item-10</option>
    <option value="11">item-11</option>
    <option value="12">item-12</option>
    <option value="13">item-13</option>
    <option value="14">item-14</option>
</select>


<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
<div id="8">8</div>
<div id="9">9</div>
<div id="10">10</div>
<div id="11">11</div>
<div id="12">12</div>
<div id="13">13</div>
<div id="14">14</div>
</div>

CSS

body {
background: #fff;
padding: 20px;
font-family: Helvetica;
}

div {
padding-bottom: 50px;
}

.flashit{
color:#f2f;
-webkit-animation: flash linear 1s infinite;
animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
 0% { opacity: 1; } 
 50% { opacity: .1; } 
 100% { opacity: 1; }
 }
@keyframes flash {
 0% { opacity: 1; } 
 50% { opacity: .1; } 
 100% { opacity: 1; }
}

JS

function ScrollToDivId(id) {
$("div").removeClass("flashit");
$("#" + id).addClass("flashit");
$('html,body').animate({
    scrollTop: $("#" + id).offset().top
}, 'slow');
}



$('#select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
ScrollToDivId(valueSelected);
});
Johan H.
  • 157
  • 3
  • 14
  • 1
    Thanks for the effort, but idea is to scroll to "item-30" when you click the arrow on the – Kristiyan Kyosev Dec 10 '19 at 00:39
  • @johan - Please use the built-in Stack Snippets (the `[<>]` toolbar button) for runnable examples, not external sites. [Here's how to do one](https://meta.stackoverflow.com/questions/358992/). – T.J. Crowder Dec 10 '19 at 07:08