[RESOLVED] Select List (multiple) – how to show 1st selected Option

@webadevMar 28.2007

Is there a way to scroll the 1st selected option of a (multiple) select list to the top (or at least into view) with javascript? I tried scrollIntoView and it doesn’t seem to work. And I haven’t found any other properties, methods etc. that even look useful for this purpose.

Here’s the code I tried:

var entitySel = document.getElementById(“entitySel”);
if (entitySel.selectedIndex != -1) {
var selOption = entitySel.options[entitySel.selectedIndex];

selOption.scrollIntoView();

}

to post a comment

JavaScript

9 Comments(s) _↴

@gil_davisMar 29.2007 — #Whatever selectedIndex of a <SELECT> object is shown at the top of the list. When you have more than one option selected, you have to look through the list of options for the "SELECTED" property to be true. Once you find the first one selected, set the selectedIndex to that number, and it should come out on top.

<i>
 </i>i = 0;
 stop = document.formName.selectName.options.length;
 done = document.formName.selectName.options[i].selected;
 while (!done)
 {i++;
 if (i &lt; stop)
 {done = document.formName.selectName.options[i].selected;}
 else
 {done = true;} // nothing selected
 }
 if (document.formName.selectName.options[i].selected)
 {document.formName.selectName.selectedIndex = i;}

You will have to tweak this, and the "nothing selected" would be an error that you would have to handle somehow.

@KorMar 29.2007 — #Or:

<i>
 </i>var s=-1;
 var opt=document.getElementsByName('selectName')[0].getElementsByTagName('option');
 var i=0, o;
 while(o=opt[i++]){
 if(o.selected){s=i-1;break}
 }
 if(s&gt;=0){
 ...... [I]do something using the variable [B][/B]s[/I]...
 }

@webadevauthorMar 29.2007 — #Thanks. I tried your code with items 22 & 24 pre-selected on load. But when I run it item 24 is no longer selected. Item 22 is selected but still not showing (I have to scroll down to see it). That makes sense since selectedIndex was already 22 before executing the code, so it doesn't seem like it would make any difference. Did you try it yourself?

Oddly enough, setting selectedIndex seems to remove all previous selections. So I tried the following, but it behaves the same as no code - selectedIndex is correct but doesn't move the item within view. I suspect that (unfortunately) there is no practical way to do this.

var entitySel = document.getElementById("entitySel");

for (var i = 0; i < entitySel.options.length; ++i) {

if (entitySel.options[i].selected) {

entitySel.options[i].selected = true;

}

}

alert(entitySel.selectedIndex);

Thanks for trying and let me know if any other ideas.

@KorMar 29.2007 — #Should work:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function alertSelected(){
 var s=-1;
 var opt=document.getElementsByName('selectName')[0].getElementsByTagName('option');
 var i=0, o;
 while(o=opt[i++]){
 if(o.selected){s=i-1;break}
 }
 if(s&gt;=0){
 alert(s)
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action=""&gt;
 &lt;select name="selectName" multiple="multiple" onchange="alertSelected()"&gt;
 &lt;option value="a"&gt;a&lt;/option&gt;
 &lt;option value="b"&gt;b&lt;/option&gt;
 &lt;option value="c"&gt;c&lt;/option&gt;
 &lt;option value="d"&gt;d&lt;/option&gt;
 
 &lt;/select&gt;
 
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@webadevauthorMar 29.2007 — #Thanks, your code probably works but it's not exactly what I'm looking for. Sorry if my description of the problem wasn't specific enough.

I am preselecting 0 or more values using JSTL in a 'multiple' select list with a scroll bar, but the the list initially displays scrolled to the top even though options farther down the list are selected. I am looking for javascript to run at the end of the JSP page to force the first selected option to show at the top of the list (rather than having to scroll down to see it) after the page is loaded.

@KorMar 29.2007 — #aha, I got it. I confess I don't know if it is possible... I'd rather say it is not...

@webadevauthorMar 29.2007 — #I agree. It's just hard to explain that to those requesting it. Thanks for trying - much appreciated.

I will probably end up displaying the selected items in a separate readonly list so they can see them.

@webadevauthorApr 04.2007 — #Thanks all. I got it working with this code (derived from gil davis code/suggestion):

[CODE]function showFirstSelected() { 
 var entitySel = document.getElementById("entitySel");
 if (entitySel.selectedIndex != -1) {
 entitySel.options[entitySel.selectedIndex].selected = true;
 } 
 }[/CODE]

I am using struts tiles and have no body tag within this jsp, so I was calling the function at the bottom of the JSP. Somehow, changing the direct call to the following made it start working.

[CODE]<script language="javascript">
 window.onload=showFirstSelected;
 </script>[/CODE]

@KorApr 04.2007 — #If it works, it's OK. Just remove the deprecated [B]language[/B] attribute from your script element. Should be [B]type[/B]

<script [B]type="text/javascript"[/B]>

Also in #JavaScript _↴

Html jquery target specific object with common classname How to link forms in Javascript using radio buttons or checkboxes

Success!

Help @webadev spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Select List (multiple) – how to show 1st selected Option

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Select List (multiple) – how to show 1st selected Option

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴