scrolling through a <select> control

[headware]

I have a <select> control that contains many entries. It allows the
user to multi-select a group of them, click a button, and store the
selected data in a database. Normally they do this starting at the top
of the list moving down towards the bottom. The problem I was having
was that the <select> control was scrolling back to the top of the
page after the postback and the user would lose their place in the
<select> control forcing them to scroll through it by hand to find the
items they just selected. Adding the following javascript helped:

function scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}

This works pretty well except that the <select> control stops
scrolling once the first selected item is showing at the bottom of the
list. This forces the user to scroll by hand in order to get to the
items after the selected ones, which is inconvinient. Is there a fix
for this? Can I make the <select> control scroll down so a few items
after the last selected item are showing at the bottom?

Thanks,
Dave

 

[Randy Webb]

I have a <select> control that contains many entries. It allows the
user to multi-select a group of them, click a button, and store the
selected data in a database. Normally they do this starting at the top
of the list moving down towards the bottom. The problem I was having
was that the <select> control was scrolling back to the top of the
page after the postback and the user would lose their place in the
<select> control forcing them to scroll through it by hand to find the
items they just selected. Adding the following javascript helped:

function scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}

This works pretty well except that the <select> control stops
scrolling once the first selected item is showing at the bottom of the
list. This forces the user to scroll by hand in order to get to the
items after the selected ones, which is inconvinient. Is there a fix
for this? Can I make the <select> control scroll down so a few items
after the last selected item are showing at the bottom?

Modify the inside of your if statement:

{
indexToShow = selectedIndex + 3;
myList.options[myList.indexToShow].selected = true;
}

That will make the third one after be selected though. That may or may
not be the behavior you are after.

If the select is a MULTIPLE, and you are wanting the last one selected,
it would be easier to have the select server-side generated and have the
one you want selected as SELECTED. Simply loop through the SELECT,
find the last one selected (by comparing its value) and then set it as
selected.

 

[headware]

Actually, that's basically what I ended up doing. I wrote some
javascript that selected the item that was 10 items after the last one
select then deselected it right away. That had the affect of scrolling
the listbox down but keeping the selection they just made. Thanks for
the help.

Dave

I have a <select> control that contains many entries. It allows the
user to multi-select a group of them, click a button, and store the
selected data in a database. Normally they do this starting at the top
of the list moving down towards the bottom. The problem I was having
was that the <select> control was scrolling back to the top of the
page after the postback and the user would lose their place in the
<select> control forcing them to scroll through it by hand to find the
items they just selected. Adding the following javascript helped:

function scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}

This works pretty well except that the <select> control stops
scrolling once the first selected item is showing at the bottom of the
list. This forces the user to scroll by hand in order to get to the
items after the selected ones, which is inconvinient. Is there a fix
for this? Can I make the <select> control scroll down so a few items
after the last selected item are showing at the bottom?

Modify the inside of your if statement:

{
indexToShow = selectedIndex + 3;
myList.options[myList.indexToShow].selected = true;
}

That will make the third one after be selected though. That may or may
not be the behavior you are after.

If the select is a MULTIPLE, and you are wanting the last one selected,
it would be easier to have the select server-side generated and have the
one you want selected as SELECTED. Simply loop through the SELECT,
find the last one selected (by comparing its value) and then set it as
selected.

 

[Chris Slominski]

Actually, that's basically what I ended up doing. I wrote some
javascript that selected the item that was 10 items after the last one
select then deselected it right away. That had the affect of scrolling
the listbox down but keeping the selection they just made. Thanks for
the help.

Dave

Randy Webb <[email protected]> wrote in message

I have a <select> control that contains many entries. It allows the
user to multi-select a group of them, click a button, and store the
selected data in a database. Normally they do this starting at the top
of the list moving down towards the bottom. The problem I was having
was that the <select> control was scrolling back to the top of the
page after the postback and the user would lose their place in the
<select> control forcing them to scroll through it by hand to find the
items they just selected. Adding the following javascript helped:

function scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}

This works pretty well except that the <select> control stops
scrolling once the first selected item is showing at the bottom of the
list. This forces the user to scroll by hand in order to get to the
items after the selected ones, which is inconvinient. Is there a fix
for this? Can I make the <select> control scroll down so a few items
after the last selected item are showing at the bottom?

Modify the inside of your if statement:

{
indexToShow = selectedIndex + 3;
myList.options[myList.indexToShow].selected = true;
}

That will make the third one after be selected though. That may or may
not be the behavior you are after.

If the select is a MULTIPLE, and you are wanting the last one selected,
it would be easier to have the select server-side generated and have the
one you want selected as SELECTED. Simply loop through the SELECT,
find the last one selected (by comparing its value) and then set it as
selected.

I came to this news group needing this very topic, so I grabbed it and gave
it a try. I have gotten inconsistant results. It wouldn't work at all in IE
and seemed to work a couple of times in Mozilla. Any suggestions? I am
totally new to JavaScript.

<html>
<head>
<title>IOC Health Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<script language="JavaScript" type="text/javascript">
function scrollToSelection()
{
var myList = document.myform.elements['IOC[]'];
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}
</script>
</head>

<body background="image/wallpaper.png" onLoad="scrollToSelection()">
...

<select name="IOC[]" MULTIPLE size="<?php echo(count($option)); ?>">
<?php
exec('./bin/iocscan -t0', $output);
foreach ($output as $ioc)
{ if (strstr($ioc, '<<'))
{ $ioc = str_replace('<<', '', $ioc);
$ioc = str_replace('>>', '', $ioc);
$ioc = trim($ioc);
$sel = "";
if (!is_null($IOCpass))
foreach ($IOCpass as $pass) if ($pass == $ioc) $sel = "selected";
echo("<option value='$ioc' $sel>$ioc");
}
}
?> </select>

 

[headware]

Chris,

This is the code I used. It works fine on IE. I haven't tested it on
any other browser. Recall that I had a listbox in which people would
select ranges of items then add them to the database by clickig a
button. After they did so, I wanted the list box to scroll so that the
last item in the range they selected shows up around the middle of the
listbox. I used 15 items as an offset to get that affect, but that's
totally dependent on the size of my listbox (i.e. the number of items
it shows at any given point). You'll have to change that to fit your
list box.

function scrollToSelection()
{
var itemList = document.forms[0].myList;
if(itemList.selectedIndex >= 0)
{
itemList.options[itemList.selectedIndex].selected = true;
}
else
{
return;
}

//count the number of selected items
var count = 0;
for(i = 0; i < itemList.options.length; i++)
{
if(itemList.options.selected)
{
count++;
}
else if(count > 0)
{
break;
}
}

/* select the item 15 past the last selected item then unselect it.
This acts as a way to get the listbox to scroll down so that
some items after the last selected one will show, which saves
the user from having to scroll to the end of the selection by
hand after adding the range. */

var offset = itemList.selectedIndex + count + 15;
itemList.options[offset].selected = true;
itemList.options[offset].selected = false;
}

Dave

Actually, that's basically what I ended up doing. I wrote some
javascript that selected the item that was 10 items after the last one
select then deselected it right away. That had the affect of scrolling
the listbox down but keeping the selection they just made. Thanks for
the help.

Dave

Randy Webb <[email protected]> wrote in message

headware wrote:
I have a <select> control that contains many entries. It allows the
user to multi-select a group of them, click a button, and store the
selected data in a database. Normally they do this starting at the top
of the list moving down towards the bottom. The problem I was having
was that the <select> control was scrolling back to the top of the
page after the postback and the user would lose their place in the
<select> control forcing them to scroll through it by hand to find the
items they just selected. Adding the following javascript helped:

function scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}

This works pretty well except that the <select> control stops
scrolling once the first selected item is showing at the bottom of the
list. This forces the user to scroll by hand in order to get to the
items after the selected ones, which is inconvinient. Is there a fix
for this? Can I make the <select> control scroll down so a few items
after the last selected item are showing at the bottom?

Modify the inside of your if statement:

{
indexToShow = selectedIndex + 3;
myList.options[myList.indexToShow].selected = true;
}

That will make the third one after be selected though. That may or may
not be the behavior you are after.

If the select is a MULTIPLE, and you are wanting the last one selected,
it would be easier to have the select server-side generated and have the
one you want selected as SELECTED. Simply loop through the SELECT,
find the last one selected (by comparing its value) and then set it as
selected.

I came to this news group needing this very topic, so I grabbed it and gave
it a try. I have gotten inconsistant results. It wouldn't work at all in IE
and seemed to work a couple of times in Mozilla. Any suggestions? I am
totally new to JavaScript.

<html>
<head>
<title>IOC Health Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<script language="JavaScript" type="text/javascript">
function scrollToSelection()
{
var myList = document.myform.elements['IOC[]'];
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}
</script>
</head>

<body background="image/wallpaper.png" onLoad="scrollToSelection()">
...

<select name="IOC[]" MULTIPLE size="<?php echo(count($option)); ?>">
<?php
exec('./bin/iocscan -t0', $output);
foreach ($output as $ioc)
{ if (strstr($ioc, '<<'))
{ $ioc = str_replace('<<', '', $ioc);
$ioc = str_replace('>>', '', $ioc);
$ioc = trim($ioc);
$sel = "";
if (!is_null($IOCpass))
foreach ($IOCpass as $pass) if ($pass == $ioc) $sel = "selected";
echo("<option value='$ioc' $sel>$ioc");
}
}
?> </select>