Eric's weblog - Multiple Selection List selectedIndex Selection on Top

<< "I support IE5 with Ajax!" Do you really? You better think about that! | Home | Future talks in California >>

Permalink
[PROGRAMMING] Multiple Selection List selectedIndex Selection on Top

Multiple Selection List selectedIndex Selection on Top

A common question I have been seen being asked a lot lately is: “I want the selected option to be the top item in my multiple-selection list and not the last visible value.”

By default when we set the selectedIndex of a selection list to a value, the browser will make scroll the list to the first spot when that value becomes visible. So if you are above the selectedIndex that you set it appears as the last option. If you are below the selection list, it appears as the first item in the list. Now that was probably not the best explanation, so I will show you two examples of what I am talking about.

The first example shows that the list is sitting by default with the first three options shown. In this I want to show the fifth element in the list to be selected. So I set the selected Index to 5 when the button is clicked.

After you click the button the browser will bring the last option in the list to show the numbers 4, 5, and 6 in the visible pane with the number 6 highlighted. If we were to have the last option selected in the list and select the fifth option again, we should see a different result set in the visible pane. Click the button to see it in action.

In this case we see that the visible options are 6, 7, and 8 with the number 6 highlighted again. What we learned from this is if we scroll the list past the location that we want selected, then the first visible option is the one that we want selected. With this said; we can adapt our code to select an option further down the list and then select the value that we want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title> Eric Pascarello Example</title>
  </head>
  <body>
    <form id="test">
      <select name="select1"  multiple="multiple" size="3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
      </select>
      <br/>
      <input type="button" name="b1" value="select 6 on top" onclick="SelectOptionTop(5)">
    </form>
    <script type="text/javascript">
      function SelectOptionTop(iPick){
        var intSpot = iPick + document.forms[0].select1.size - 1;
        if(document.forms[0].select1.options.length>intSpot)
          document.forms[0].select1.selectedIndex = intSpot;
        document.forms[0].select1.selectedIndex = iPick;
      }
    </script>
  </body>
</html>

Click the button below to see the code in action.

So if you want to have the option you selected at top of the list, then you need to select a value further down the list and then select the value you want. Hope you find this tip to be helpful.

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

TrackBacks[0] Comments[3] Posted by pascarello on April 3, 2006 11:06:12 AM EST

Reply | Permalink Re: Multiple Selection List selectedIndex Selection on Top

Nice piece of usablitiy JavaScript. You really need to change your style sheet colors though as I could barely tell that "6" was highlighted / selected.

Comment from Ryan on April 7, 2006 4:53:52 PM EST

Reply | Permalink Re: Multiple Selection List selectedIndex Selection on Top

Hi, I just happened to come across this page when searching for something different. Just to let you know this doesn't seem to work in mac/safari 2.0.3

Comment from Phil on June 13, 2006 10:32:00 AM EST

Reply | Permalink Re: Multiple Selection List selectedIndex Selection on Top

Any Mac user should know not to use Safari! Safari is just pain in the butt working with JavaScript. Eric

Comment from Eric Pascarello on June 13, 2006 10:48:42 AM EST

Add a comment

TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1144080372141

April 2006
Sun	Mon	Tue	Wed	Thu	Fri	Sat
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30
Mar \| Today \| May

Title
Body	HTML : b, i, blockquote, br, p, pre, a href="", ul, ol, li
Math Quiz 4 + 7 =	(Helps stop blog spam)
Name
E-mail address
Website
Remember me	Yes No
E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).