open the options box associated with a select

[ddailey]

I have a select named "s" in a form named "f":

By default only one of the options in the select appears on the page --
that is how I want it.

What I'd like to do is simulate a click on the select so that all of
its options become visible -- i.e., its option box opens to reveal all
document.f.s.op tions.length options.

I've tried the following:
1. document.f.s.op tions[k].selected=true
2. document.f.s.fo cus()
3. document.f.s.cl ick()
4. document.f.s.si ze=document.f.s .options.length
1. succeeds in changing the option which is visible but leaves the
displayed number unchanged
2. highlights the currently visible option-- indicating focus has been
received
3. appears to do nothing
4. this changes the size of the visible rectangle, and is sort of what
I want, except that the other options appear above the select's prior
rectangle (hence disrupting extant page layout) rather than allowing
the other options to "drop down" below as should happen when physically
clicking on a select.

I might just have to build a widget to do this, but thought someone
might know of the proper method for effecting this behavior.

TIA
ddailey

[Hal Rosser]

"ddailey" <dd*****@zoomin ternet.net> wrote in message
news:11******** **************@ t31g2000cwb.goo glegroups.com.. .

I have a select named "s" in a form named "f":

By default only one of the options in the select appears on the page --
that is how I want it.

What I'd like to do is simulate a click on the select so that all of
its options become visible -- i.e., its option box opens to reveal all
document.f.s.op tions.length options.
TIA
ddailey

This is not exactly what you were wanting, but all options become visible.

var theSize = document.forms["f"].elements["s"].length;
document.forms["f"].elements["s"].size = theSize;

then change theSize back to 1 and run the 2nd line again when you're done.
it doesn't simulate a click, but all the options become visible.
HTH

[Jim]

Hi There DDaily,
plse check the following code out.
Hopefully this is what you were looking for:
<form name="f">
<select name="s" onChange="this. multiple='true' , this.size='5'">
<option selected value=''>--- Automobile Types --- </option>
<option value="ford">Fo rd</option>
<option value="chevy">C hevrolet</option>
<option value="honda">H onda</option>
<option value="toyota"> Toyota</option>
</select>
</form>
The prior poster's code is more flexible as it detects the options
length, which in the case of the above, (which is more specific) needs
to be hard-coded into the form itself.

In any event, I hope this helps!
-Jim

[Matt Kruse]

Hal Rosser wrote:

This is not exactly what you were wanting, but all options become
visible.
var theSize = document.forms["f"].elements["s"].length;
document.forms["f"].elements["s"].size = theSize;

Using similar logic, check out this proof of concept I did a while ago:
http://www.mattkruse.com/temp/expand_select.html

It's not perfect and doesn't work in all cases but it's interesting.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Thomas 'PointedEars' Lahn]

Jim wrote:

<form name="f">
The `action' attribute is required, setting the `name' attribute is
unnecessary here.
<select name="s" onChange="this. multiple='true' , this.size='5'">

This may or may not work. The `multiple' property is of type boolean
(true), not string ('true'). The `size' property is of type number (5),
not string ('5').

I do not see anything in the OP that justifies modifying the value of
the `multiple' property here, thereby changing the behavior of the
control completely.
PointedEars

[Hal Rosser]

"Matt Kruse" <ne********@mat tkruse.com> wrote in message
news:e1******** *@news4.newsguy .com...

Hal Rosser wrote:

This is not exactly what you were wanting, but all options become
visible.
var theSize = document.forms["f"].elements["s"].length;
document.forms["f"].elements["s"].size = theSize;

Using similar logic, check out this proof of concept I did a while ago:
http://www.mattkruse.com/temp/expand_select.html

It's not perfect and doesn't work in all cases but it's interesting.

Kool, it works in IE, but in Firefox it changes back too quick.

[RobG]

Hal Rosser said on 10/04/2006 11:23 AM AEST:

"Matt Kruse" <ne********@mat tkruse.com> wrote in message
news:e1******** *@news4.newsguy .com...

Hal Rosser wrote:

This is not exactly what you were wanting, but all options become
visible.
var theSize = document.forms["f"].elements["s"].length;
document.for ms["f"].elements["s"].size = theSize;

Using similar logic, check out this proof of concept I did a while ago:
http://www.mattkruse.com/temp/expand_select.html

It's not perfect and doesn't work in all cases but it's interesting.

Kool, it works in IE, but in Firefox it changes back too quick.

Matt's use of a default button causes the form to submit (in Firefox),
which appears to make the select 'change back'. IE's implementation of
a button may be buggy in this respect.

Use a button (or input) type="button" and that goes away (another reason
to always specify attributes, even when you want the default).

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>
--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>

[Matt Kruse]

RobG wrote:

Matt's use of a default button causes the form to submit (in Firefox),
which appears to make the select 'change back'. IE's implementation
of a button may be buggy in this respect.

Good catch. This page was a quick hack I did for an IE-specific site a while
ago just to prove the concept. There are a few things which should certainly
be cleaned up before using it for real!

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Csaba Gabor]

ddailey wrote:

I have a select named "s" in a form named "f":

By default only one of the options in the select appears on the page --
that is how I want it.

What I'd like to do is simulate a click on the select so that all of
its options become visible -- i.e., its option box opens to reveal all
document.f.s.op tions.length options.

I've tried the following:

....

There is a bug logged in Firefox
(https://bugzilla.mozilla.org/show_bug.cgi?id=303713) that is supposed
to be fixed for the next release (after 1.5.0.1) that would allow you
to do this in FF by sythesizing an alt+down_arrow keypress event and
dispatching it at the select element.

Not wanting to wait, I rewrote my GreaseMonkey extension to include
GM_sendKeys (documented at
http://www.nabble.com/GM_sendKeys-t1421601.html) - example 3 shows how
it covers your situation - and now I can do this on my machines. (In
case you don't know, GreaseMonkey is an extension to FF that allows one
to modify the pages (or page behaviour of the pages that you view on
your own computers).

Csaba Gabor from Vienna

[Hal Rosser]

"RobG" <rg***@iinet.ne t.au> wrote in message
news:vu******** ***********@new s.optus.net.au. ..

Matt's use of a default button causes the form to submit (in Firefox),
which appears to make the select 'change back'. IE's implementation of
a button may be buggy in this respect.

Use a button (or input) type="button" and that goes away (another reason
to always specify attributes, even when you want the default).

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>

Hmmm - learn something new every day.
So the form 'submits' without a 'submit' button? But its not supposed to,
right?