How to scroll a select list with JavaScript or jQuery?

Question

I have a select tag:

           <select size="3">             <option value="1">value 1</option>             <option value="2">value 2</option>             <option value="3">value 3</option>             <option value="4">value 4</option>             <option value="5">value 5</option>             <option value="6">value 6</option>             <select>  

Now it displays first 3 options, how can I scroll to see elements from 3-5 or 4-6 using jQuery or pure JavaScript?

Answer 1

.scrollTop() may work:

$('select').scrollTop(30); 

And you can scroll to a particular element using this:

var $s = $('select');  var optionTop = $s.find('[value="3"]').offset().top; var selectTop = $s.offset().top;  $s.scrollTop($s.scrollTop() + (optionTop - selectTop)); 

Try it here: http://jsfiddle.net/kj9p4/

Note: does not work in Chrome.

Answer 2

 $("select").scrollTop($("select").find("option[value=4]").offset().top); 

Just set the appropriate selectors for select element and values inside