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.options.length options.

I've tried the following:
1. document.f.s.options[k].selected=true
2. document.f.s.focus()
3. document.f.s.click()
4. document.f.s.size=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]

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.options.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">Ford</option>
<option value="chevy">Chevrolet</option>
<option value="honda">Honda</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

 

[Thomas 'PointedEars' Lahn]

<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

 

[Matt Kruse]

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.

 

[Hal Rosser]

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:

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.

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>

 

[Matt Kruse]

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!

 

[Csaba Gabor]

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.options.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]

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?

 

[RobG]

Hal Rosser said on 13/04/2006 7:32 AM AEST:

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

Depends on your definition of 'supposed to'.

In both Firefox 1.5 and IE 6 if a form has only one input element and it
is 'successful', pressing 'enter' when the element has focus submits the
form. In Firefox if there is also a submit button in the form (that is,
either a button or input element of type submit), pressing enter in any
input form control can submit the form - IE is different here.

The HTML spec defines how to process a submit event, and that a submit
button should cause it, but doesn't restrict submission to only submit
buttons and scripts.

The behaviour is not consistent across browsers or even different
versions of the same browser. There are many scripts that attempt to
make it consistent, most fail anyway and make individual browsers behave
differently on different sites. It's a mess best left alone.


.... But that is not the issue here ...

A button element in a form has a default type of 'submit'. So marking
up a button element like:

<form action="">
...
<button>I'm a button</button>
...
</form>


means that the form does have a submit button, just that type='submit'
isn't explicitly stated as an attribute in the source markup. Nor does
it have to be for valid HTML.

I think it's bad form to not state default attributes because it makes
the code harder to maintain, others feel it's not good as it adds
unnecessary characters. Similarly for quoting attribute values like:

... rows=10 cols=25 ...


I much prefer to see the value quoted even though they don't have to be.
Ditto for semi-colons, line breaks, indenting ... to each their own.

 

[Richard Cornford]

RobG wrote:

A button element in a form has a default type of 'submit'.
So marking up a button element like:

<form action="">
...
<button>I'm a button</button>
...
</form>


means that the form does have a submit button, just that
type='submit' isn't explicitly stated as an attribute in
the source markup. Nor does it have to be for valid HTML.

I think it's bad form to not state default attributes because
it makes the code harder to maintain, others feel it's not
good as it adds unnecessary characters. ...

<snip>

Providing BUTTON elements with a type attribute regardless of the
existence of an official default is a good idea in practice largely
because in IE the default is type="button" and so providing the
attribute avoids the mark-up being interpreted in two distinct ways in
different browsers.

Richard.