I have a select box with years. First option is empty. When I click on select list I want scrollbar to scroll automaticaly down . I've tried with scrollTop but it's working only in FireFox.

Ex:

<select id="mySelect">
<option selected="selected" value=""></option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
...

</select>

I have a select box with years. First option is empty. When I click on select list I want scrollbar to scroll automaticaly down . I've tried with scrollTop but it's working only in FireFox.

Ex:

<select id="mySelect">
<option selected="selected" value=""></option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
...

</select>

• javascript
• jquery
• html

• 3 Why not just reverse the order of the dates? :) – SeanCannon Commented Jul 11, 2011 at 15:52
• A little more explanation, please? Do you want the dropdown to scroll to the bottom of the list? If so, why not invert the order so the last one is on the top? – Andy_Vulhop Commented Jul 11, 2011 at 15:54
• I just want to scroll down the vertical scrollbar with 400px for example without selecting any option because I want the user to see most important options from select list before he selects an option – Iulian Boiculese Commented Jul 11, 2011 at 17:53

5 Answers 5

Select click/focus is a bit more plicated, actually. This is what you want:

$('#mySelect').focus(function(){

    if($(this).data('focused') !==  true)
    {
        $(this).data('focused',true);  
        $(this).children(':last-child').prop('selected',true);
    }

});

$('#mySelect').blur(function(){
    $(this).data('focused',false); 
});

Working example: http://jsfiddle/AlienWebguy/zuJrK/

Try the below code I hope it helps

$("#mySelect").click(function(){
   $(this).find("option").eq(someMiddleNumber).focus().blur();
});

You may try to remove the style "overflow-y:auto;" from css, that will keep the selected item scroll into the view (when you use arrow keys to change the selection).

Some improvement to AlienWebguy's answer:

You can make sure the default value will stay selected in case user does not make any changes by adding the settimeout section below:

if($(this).data('focused') !==  true)
{
    $(this).data('focused',true);  
    $(this).children(':last-child').prop('selected',true);
    // dirty workaround
    window.setTimeout(function(){
        $(this).val("");
    }, 50);
}

ShankarSangoli was close but I think you want:

$("#mySelect").click(function(){
   $(this).find("option:last").attr("selected","selected");
});