473,388 Members | 915 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,388 software developers and data experts.

scolling a MULTIPLE selectbox with js?

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
Jul 23 '05 #1
7 1945
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
---------------------------------------------------------------
Jul 23 '05 #2
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
Jul 23 '05 #3
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.

Jul 23 '05 #4
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...

Jul 23 '05 #5

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>

Jul 23 '05 #6
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>
Jul 23 '05 #7
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.

Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Tole | last post by:
hi all, i've got a selcetbox (multiple) which is filled by javascript. only problem is that i have aprox 1000 options to add to that select, and that adding lasts for 5-6 seconds. Even...
4
by: Ferd Berfel | last post by:
given this code: <select name="mySelect" size="3" multiple> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> <option...
1
by: Warren Pollans | last post by:
Hello, I have a selectbox with 'multiple' enabled. It works fine. My question is related to formatting the options. I want the options to appear in three columns as though it were a...
3
by: Stefan Richter | last post by:
I would like to fill a Selectbox dynamically. I am taking all values from a db, and fill them into a selectbox. I guess the best way was to use some kind of a dynamical array, where you don't have...
3
by: imrantbd | last post by:
This is my first problem.Please help me. I have the following code: <head> <script language="JavaScript"> function addSrcToDestList() { destList1 = window.document.forms.destList; srcList...
4
by: shankwheat | last post by:
I'm passing a string like 'Div3,Div4' to use as options in a selectbox but I need the text the user sees in the box different from the values. My code populates the values in the selectbox...
4
by: teknoshock | last post by:
I have created a page with multiple drop down boxes, all populated with the same options. My problem is, for 12 dropdown boxes and 40 choices per box, I end up with a massive file. Also, if I...
1
by: giloosh | last post by:
i would like to dynamically output such a selectbox below using php and mysql: <select> <option< 100 </option> <option100 to 150 </option> <option150 to 200 </option> <option200 to 250...
3
by: =?iso-8859-1?q?Jesper_R=F8nn-Jensen?= | last post by:
I'm working with a requirement to make a selectbox the same height as normal text input elements. (at least for IE7) But in IE the selectbox reacts strangely to the CSS rules. Normally, there...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.