Search code examples
javascripthtmlmootools

Scrolling to the top of a multi-select

I'm looking for a way where, when a user selects an option in a multi-select and submits it(AJAX), the multi-select should scroll to the top showing the first option (including the optgroup label).

Here is the current code that I have

$('selectId').selectedIndex = 0;
$('selectId').selectedIndex = -1;

This does scroll to the first item in the select box but the optgroup label is not visible, since the scroll is just below the optgroup label and on the first option.

Any help on how to get the optgroup label visible would be helpful.

Here is the fiddle : http://jsfiddle.net/sfHtF/1/

Scroll all the way down, click on 'GoTop', it goes to "one" but doesn't show the optgroup label.

Solution

  • I'm answering my own question here since I have found a solution

    $('selectId').selectedIndex = -1; //de-selects all options
$('selectId').scrollTo(0,0); //sets the scroll to right at the top

    Working fiddle here : http://jsfiddle.net/sfHtF/4/

    Thanks everyone for looking into it.