Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > open the options box associated with a select

Reply
Thread Tools

open the options box associated with a select

 
 
ddailey
Guest
Posts: n/a
 
      04-09-2006
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

 
Reply With Quote
 
 
 
 
Hal Rosser
Guest
Posts: n/a
 
      04-09-2006

"ddailey" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.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.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


 
Reply With Quote
 
 
 
 
Jim
Guest
Posts: n/a
 
      04-09-2006
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

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      04-09-2006
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
 
Reply With Quote
 
Matt Kruse
Guest
Posts: n/a
 
      04-09-2006
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


 
Reply With Quote
 
Hal Rosser
Guest
Posts: n/a
 
      04-10-2006

"Matt Kruse" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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.


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      04-10-2006
Hal Rosser said on 10/04/2006 11:23 AM AEST:
> "Matt Kruse" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>
>>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.


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.com/FAQ>
 
Reply With Quote
 
Matt Kruse
Guest
Posts: n/a
 
      04-10-2006
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


 
Reply With Quote
 
Csaba Gabor
Guest
Posts: n/a
 
      04-11-2006
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.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

 
Reply With Quote
 
Hal Rosser
Guest
Posts: n/a
 
      04-12-2006

"RobG" <(E-Mail Removed)> wrote in message
news:vuk_f.1006$(E-Mail Removed)...
>
> 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?



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Replace all the options in a select box ? mark4asp Javascript 0 05-17-2007 03:30 PM
Setting options on a select box (ComboBox) - in another window jodleren Javascript 2 03-31-2007 12:42 PM
Options in select Box sandeepsinghal@gmail.com HTML 5 10-30-2006 02:06 AM
Select box options to disable/enable checkbox? bigrich Javascript 2 01-18-2006 02:26 AM
select of select box will select multiple in another box palmiere Javascript 1 02-09-2004 01:11 PM



Advertisments