scolling a MULTIPLE selectbox with js?

[Erwin Moller]

Hi,

situation:
I have a long list of options in multiple selectbox.
The selectbox gets a scrollbar in that situation.

Does anybody know if it is possible to scroll through the options with
javascript?
eg: moving the to the first selected option??

Any samplecode, API, pointers?

Thanks for your time.

Regards,
Erwin Moller

[Jeff North]

On Thu, 17 Mar 2005 10:16:22 +0100, in comp.lang.javascript Erwin
Moller <si******************************************@spam yourself.com>
wrote:

| Hi,
|
| situation:
| I have a long list of options in multiple selectbox.
| The selectbox gets a scrollbar in that situation.
|
| Does anybody know if it is possible to scroll through the options with
| javascript?
| eg: moving the to the first selected option??
|
| Any samplecode, API, pointers?

Don't need to use any coding. Just press the keys on your keyboard.
This works for single select list boxs. Muti-select, well that's
another story.
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

[Erwin Moller]

Jeff North wrote:

On Thu, 17 Mar 2005 10:16:22 +0100, in comp.lang.javascript Erwin
Moller <si******************************************@spam yourself.com>
wrote:

| Hi,
|
| situation:
| I have a long list of options in multiple selectbox.
| The selectbox gets a scrollbar in that situation.
|
| Does anybody know if it is possible to scroll through the options with
| javascript?
| eg: moving the to the first selected option??
|
| Any samplecode, API, pointers?

Don't need to use any coding. Just press the keys on your keyboard.
This works for single select list boxs. Muti-select, well that's
another story.

Hi Jeff,

I appreciate you try to answer my question, but your response isn't really
helpfull.
First you say I do not need any coding because I can navigate through it by
using my keyboard. I fail to see the relevance of that statement.

Then you say that multiple select is another story, and that was excactly
what my question was about....

So what is it you are trying to tell me?

That you do not know how to interact with the scrollbar in a multiple select
box using javascript?
Just like me?
In that case, why write?

(No punch intended.)
:-)

I hope somebody else knows. (If it is possible at all)

Regards,
Erwin Moller

[bruce_brodinsky]

Unsure of the question, but I think we had a similar situation:

We had a select box with a long list of names. To its side we had a
text box. As the user entered a name in the textbox, at each key, we
scrolled the select box to the name that best matched the (partial
entry) of the name in the text box. For instance, when user typed "B",
we went to the beginning of the B's. When user continued and entered
"R", we went to the first name beginning with "BR", etc.

We did this by having code in the onkeypress (or onkeydown, i
forget) event. In that event, we searched the select box (we did binary
search, but that's irrelevent), and when we found our match, we just
did
selbox.selectedIndex= iFoundMatch

Hope this helps a little.

[RobB]

Erwin Moller wrote:

Hi,

situation:
I have a long list of options in multiple selectbox.
The selectbox gets a scrollbar in that situation.

Does anybody know if it is possible to scroll through the options with javascript?
eg: moving the to the first selected option??

Any samplecode, API, pointers?

Thanks for your time.

Regards,
Erwin Moller

This sort-of-works in moz/ns:

function viewOpt(s)
{
var i = 0, o, os = s.options;
while (o = os[i++])
{
if (o.selected)
{
s.scrollTop = o.offsetTop - o.offsetHeight;
break;
}
}
}

No luck in IE, however; listboxes, being windowed elements, are
amazingly intractable there (everything from option event handlers -
none - to CSS styling of individual options, select borders, etc.).
Maybe someone else knows a way...

[Mark Szlazak]

Erwin Moller wrote:

Hi,

situation:
I have a long list of options in multiple selectbox.
The selectbox gets a scrollbar in that situation.

Does anybody know if it is possible to scroll through the options with javascript?
eg: moving the to the first selected option??

Any samplecode, API, pointers?

Thanks for your time.

Regards,
Erwin Moller

For select boxes s1 and s2 you could use
s2.selectedIndex = s1.selectedIndex
or
s2.options[s1.selectedIndex].selected = true
as in this example:

<html>
<head>
<script>
function showOption (s1, s2) {
s2.selectedIndex = s1.selectedIndex;

/* OR */

//s2.options[s1.selectedIndex].selected = true;
}
</script>
</head>
<body>
<form name="A">
<select name="s1" size=5 onchange="showOption (this,
document.forms.A.s2)">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
<option value="seven">7</option>
<option value="eight">8</option>
<option value="nine">9</option>
<option value="ten">10</option>
</select>
<select name="s2" size=5>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
</select>
</form>
</body>
</html>

[Erwin Moller]

Hi Mark en Rob too,

Shame we do not have a decent way to scroll, I agree, but you put me on the
right track.
As it turned out, deselecting, then selecting an option will force the
MULTIPLE SELECT box to scroll to that newly activated value.

That is all I need for now.
Thank you!

Here follows a slightly modified version of Marks script to 'proof' the
concept.

Regards,
Erwin Moller
<html>
<head>
<script>
function showOption (s1, s2) {
s2.options[s1.selectedIndex].selected = false;
s2.options[s1.selectedIndex].selected = true;
}
</script>
</head>
<body>
<form name="A">
<select name="s1" size=5 onchange="showOption (this,
document.forms.A.s2)">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
<option value="seven">7</option>
<option value="eight">8</option>
<option value="nine">9</option>
<option value="ten">10</option>
</select>

<select name="s2" size=5 MULTIPLE>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
</select>
</form>
</body>
</html>

[Mark Szlazak]

Erwin Moller wrote:

Hi Mark en Rob too,

Shame we do not have a decent way to scroll

In Mozilla/Firefox onscroll is available for select elements so you can
easily sync their scrolling. IE doesn't have this but you could
simulate it with the scrollbars of a layer-pair (i.e, a pair of nested
<div>'s where the child layer forces appropriately scaled scrollbars of
the parent layer). Position and size this layer-pair over a selects
scrollbar region. Also, you'll need to wrap each select in its own
<div> then clip it to remove the selects scrollbar otherwise it will
cover-up any layer you try to position over it. You can then use your
layer-pairs parent <div>'s scrollTop property to control select
element(s) scrolling by dividing this by a "number" (I experimented to
get this value) then flooring or rounding and assigning the result to
selectedIndex, selectElement.selectedIndex =
Math.floor(this.scrollTop/number). Seems to work OK but you have to
jump through a few hoops to get there.