scolling a MULTIPLE selectbox with js?

E

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
 
J

Jeff North

| 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?
Click to expand...

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.
 
E

Erwin Moller

Jeff said:
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.
Click to expand...

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
 
B

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.
 
R

RobB

Erwin said:
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
Click to expand...

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...
 
M

Mark Szlazak

Erwin said:
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
Click to expand...

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>
 
E

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>
 
M

Mark Szlazak

Erwin said:
Hi Mark en Rob too,

Shame we do not have a decent way to scroll
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0
Jquery not triggering / acting as expected. 0
I Need Help with making a function that draws in a canvas using location data. 1
Thoughts on JS library to help with event driven paradigms 15
How to force a scroll of div with overflow set to auto? 4
Scrolling multiple-select, IE vs Firefox 4
jQuery Scrapping & Formatting Inputted Paste 2
Multiple drop down boxes with same options 4

Members online

Total: 38 (members: 2, guests: 36)
Robots: 410

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top