如何向下滚动到选择元素中的特定选项？

Question

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.

Answer 1

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. (Eg, 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.

Answer 2

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);
});