show a select dropdown's options with js?

[nick]

Anyone know how I can "pop open" a <select> element dropdown list with
javascript, so the options can be seen, just as if the user had
clicked on it?

I thought about doing it by triggering a click event or focusing the
element and then triggering a keypress, but I'm not sure if those
things are actually doable, much less how to do them. Any help would
be appreciated.

 

[Laser Lips]

Anyone know how I can "pop open" a <select> element dropdown list with
javascript, so the options can be seen, just as if the user had
clicked on it?

I thought about doing it by triggering a click event or focusing the
element and then triggering a keypress, but I'm not sure if those
things are actually doable, much less how to do them. Any help would
be appreciated.

I do not think it is possible.

Graham

 

[nick]

I do not think it is possible.

That makes me sad.

Second opinions?

 

[Garrett Smith]

That makes me sad.

Second opinions?

Calling focus() on an option does not bring it into focus.

Dispatching a click event or mousedown event doesn't pop the select open.

Seems to be not possible.

 

[SAM]

Le 5/7/10 8:23 AM, nick a écrit :

Anyone know how I can "pop open" a <select> element dropdown list with
javascript, so the options can be seen, just as if the user had
clicked on it?

I thought about doing it by triggering a click event or focusing the
element and then triggering a keypress, but I'm not sure if those
things are actually doable, much less how to do them. Any help would
be appreciated.

You can only click forms' buttons by JS
(buttons = button, input-image, reset, submit)
The only way to click a selectbox's option could be to simulate a select



quick and not finish example :

<script type="text/javascript">
function clickMenu(menuIndex) {
var m = document.getElementById('test'),
c = m.className=='';
s = m.getElementsByTagName('BUTTON'),
n = s.length;
m.className = c? 'vu' : '';
for(var i in s) s.className = '';
s[menuIndex].className = 'vu';
if(c) s[menuIndex].click();
}
function blurMenu() {
var a = arguments[0];
alert('choice = '+a.innerHTML);
setTimeout(function() {a.parentNode.className='';},1000)
}
</script>
<style type="text/css">
#test button { width: 100%; text-align:center;border:3px inset;
background:#fff; display: none }
#test.vu button,
#test button.vu { display: block }
#test.vu button.vu { background: #6CF }
</style>
<form action="#" onsubmit="return false">
<p>
<span id="test" style="display:block;float:left;">
<button class="vu" onclick="blurMenu(this)">100 000</button>
<button onclick="blurMenu(this)">200 000</button>
<button onclick="blurMenu(this)">300 000</button>
<button onclick="blurMenu(this)">400 000</button>
<button onclick="blurMenu(this)">500 000</button>
<button onclick="blurMenu(this)">600 000</button>
<button onclick="blurMenu(this)">700 000</button>
</span>
<input name="myIndex" onchange="clickMenu(this.value)">
</form>


Certainly google can find you more efficients examples

one among some of them
<http://www.marghoobsuleman.com/jquery-image-dropdown>

 

[nick]

Calling focus() on an option does not bring it into focus.

Dispatching a click event or mousedown event doesn't pop the select open.

Seems to be not possible.

Thanks for the follow-up, Garrett. I'll have to look into dispatching
mouse events; was not sure whether that could be done.

 

[nick]

The only way to click a selectbox's option could be to simulate a select

quick and not finish example [...]

Hmm, I hadn't thought of that approach. Those mock-dropdowns have been
around for years... I wouldn't be surprised if they were originally
inspired by the ie5/6 <select> z-index bug. I might consider doing
something like this, although it's probably overkill for the thing I'm
working on. Thanks.

 

[David Mark]

The only way to click a selectbox's option could be to simulate a select

quick and not finish example [...]

Hmm, I hadn't thought of that approach. Those mock-dropdowns have been
around for years... I wouldn't be surprised if they were originally
inspired by the ie5/6 <select> z-index bug. I might consider doing
something like this, although it's probably overkill for the thing I'm
working on. Thanks.

Be very careful of faux form controls. They are virtually always
accessibility liabilities (which can turn into legal liabilities in some
countries).

 

[nick]

Be very careful of faux form controls.  They are virtually always
accessibility liabilities (which can turn into legal liabilities in some
countries).

Good point. I don't really like the idea of fake form controls either,
especially ones that just mimic real form controls. It seems
superfluous.

I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>. Every input in my
form (kind of like the awful new toolbar things in MS Word, except it
kind of works here) is in a label (styled as a button), and when I
click the label, the browser acts as if I've clicked the form
element ... with the exception of <select>. Text inputs are focused,
file dialogs pop up, etc. I want something similar to happen when the
user clicks the dropdown's label, but adding a fake form control for
this small convenience sounds like a bad idea.

 

[SAM]

Le 5/9/10 8:49 AM, nick a écrit :

Good point. I don't really like the idea of fake form controls either,
especially ones that just mimic real form controls. It seems
superfluous.

I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.

<label onmouseover="dropDown(this)" for="select_1">
blah blah ... ... :
<select id="select_1"
onclick="dropUp(this); doThat(this)">
... ...
</label>


function dropDown(what) { what.className = 'open';
var s = document.getElementById(what.getAttribute('for'));
s.size = s.length; }

function dropUp(what) { what.tagName=='label'?
what.className = '' : what.parentNode.className = ''; }


maybe ?
and with good css rules ? in this idea :

label { position: relative; border: 3px outset; background:#fff; }
label select { position:absolute;width:100%;display:none}
label.open select { display:block }
label.open select option:hover { background:#ff7 }

Every input in my
form (kind of like the awful new toolbar things in MS Word, except it
kind of works here) is in a label (styled as a button), and when I
click the label, the browser acts as if I've clicked the form
element ... with the exception of <select>. Text inputs are focused,
file dialogs pop up, etc. I want something similar to happen when the
user clicks the dropdown's label, but adding a fake form control for
this small convenience sounds like a bad idea.

What you want isn't it a context menu ?
(I don't know Words, so I can't see its terrrific icon's dropdown)

 

[nick]

Le 5/9/10 8:49 AM, nick a écrit :
[...]

I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.

<label onmouseover="dropDown(this)" for="select_1">
        blah blah ... ... :
        <select id="select_1"
                onclick="dropUp(this); doThat(this)">
         ... ...
</label>

AFAIK you don't need the 'for' attribute if the control is inside of
the label

function dropDown(what) { what.className = 'open';
var s = document.getElementById(what.getAttribute('for'));
s.size = s.length; }

function dropUp(what) { what.tagName=='label'?
        what.className = '' : what.parentNode.className = '';}

maybe ?

Hmm, I see where you're going with this.

and with good css rules ? in this idea :

label { position: relative; border: 3px outset; background:#fff; }
label select { position:absolute;width:100%;display:none}
label.open select { display:block }
label.open select option:hover { background:#ff7 }

Yeah, something like that might work. Might need to set 'multiple'
attribute on the select to get the options showing, or does
display:block take care of that? Thanks for the suggestions, I'll try
this out.

[...]

What you want isn't it a context menu ?
(I don't know Words, so I can't see its terrrific icon's dropdown)

Think about clicking the 'table' button in this picture and a dropdown
menu appearing

http://www.actiprosoftware.com/products/dotnet/WPF/Ribbon/Images/Ribbon.gif

 

[David Mark]

Le 5/9/10 8:49 AM, nick a écrit :
[...]

I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.

<label onmouseover="dropDown(this)" for="select_1">
blah blah ... ... :
<select id="select_1"
onclick="dropUp(this); doThat(this)">
... ...
</label>

AFAIK you don't need the 'for' attribute if the control is inside of
the label

You don't, but you should avoid that construct for compatibility reasons.

 

[RobG]

Le 5/9/10 8:49 AM, nick a écrit :
[...]
I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.
<label onmouseover="dropDown(this)" for="select_1">
        blah blah ... ... :
        <select id="select_1"
                onclick="dropUp(this); doThat(this)">
         ... ...
</label>

AFAIK you don't need the 'for' attribute if the control is inside of
the label

According to the W3C HTML specification, yes. But you presume all
browsers follow the spec.

You don't, but you should avoid that construct for compatibility reasons.

You do if the browser is IE 6, and maybe others.


PS. Hey Nick, there's an Oxford (aka Harvard) comma for you. Do your
worst!

Language warning:
<URL:

>

 

[David Mark]

On May 9, 6:46 am, SAM wrote:
Le 5/9/10 8:49 AM, nick a écrit :
[...]
I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.
<label onmouseover="dropDown(this)" for="select_1">
blah blah ... ... :
<select id="select_1"
onclick="dropUp(this); doThat(this)">
... ...
</label>
AFAIK you don't need the 'for' attribute if the control is inside of
the label

According to the W3C HTML specification, yes. But you presume all
browsers follow the spec.

You don't, but you should avoid that construct for compatibility reasons.

You do if the browser is IE 6, and maybe others.

As mentioned, best to avoid that construct altogether (that's what I
do). Then you can remain blissfully unaware of such idiosyncrasies (as
I am).

 

[David Mark]

nick wrote:
On May 9, 6:46 am, SAM wrote:
Le 5/9/10 8:49 AM, nick a écrit :
[...]
I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.
<label onmouseover="dropDown(this)" for="select_1">
blah blah ... ... :
<select id="select_1"
onclick="dropUp(this); doThat(this)">
... ...
</label>
AFAIK you don't need the 'for' attribute if the control is inside of
the label

According to the W3C HTML specification, yes. But you presume all
browsers follow the spec.

You don't, but you should avoid that construct for compatibility reasons.

You do if the browser is IE 6, and maybe others.

As mentioned, best to avoid that construct altogether (that's what I
do). Then you can remain blissfully unaware of such idiosyncrasies (as
I am).

And actually, that's not quite accurate. The fact that IE6 ignores the
implications of that construct is an example of the incompatibilities I
advised to avoid. Without the - for - attribute, IE6 just doesn't make
the connection.

 

[RobG]

nick wrote:
On May 9, 6:46 am, SAM wrote:
Le 5/9/10 8:49 AM, nick a écrit :
[...]
I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.
<label onmouseover="dropDown(this)" for="select_1">
blah blah ... ... :
<select id="select_1"
onclick="dropUp(this); doThat(this)">
... ...
</label>
AFAIK you don't need the 'for' attribute if the control is inside of
the label
According to the W3C HTML specification, yes. But you presume all
browsers follow the spec.
You don't, but you should avoid that construct for compatibility reasons.
You do if the browser is IE 6, and maybe others.

As mentioned, best to avoid that construct altogether (that's what I
do). Then you can remain blissfully unaware of such idiosyncrasies (as
I am).

And actually, that's not quite accurate. The fact that IE6 ignores the
implications of that construct is an example of the incompatibilities I
advised to avoid. Without the - for - attribute, IE6 just doesn't make
the connection.

Yes, problem is that practices develop to avoid incompatibilities,
then after a while someone asks "why do we do that?" and everyone has
forgotten the answer. I don't know if there's any way to design around
that other than to fully document the code. Seems to be human nature.

Another example is getting the value of a select element - most modern
browsers will give the correct answer where the type is select-one and
all options have a value attribute given:

alert( selectElement.value );

but some ancient browser didn't (Navigator 4 or 5?), so we persist
with the clumsy:

alert( selectElement.options[selectElement.selectedIndex].value )

and even then some browsers still get it wrong if the option has no
value attribute, so there's the tiresome "if there's no value, get the
text" loop.

Then some bright spark asks "Why don't we use selectElement.value?
Works in all the (very small number of modern) browsers I tested
in...".

And then there is type select-multiple to contend with, which HTML 5
doesn't fix.

 

[David Mark]

RobG wrote:
nick wrote:
On May 9, 6:46 am, SAM wrote:
Le 5/9/10 8:49 AM, nick a écrit :
[...]
I'm working on another Chrome extension. I want to pop the dropdown
open when the user clicks its containing <label>.
<label onmouseover="dropDown(this)" for="select_1">
blah blah ... ... :
<select id="select_1"
onclick="dropUp(this); doThat(this)">
... ...
</label>
AFAIK you don't need the 'for' attribute if the control is inside of
the label
According to the W3C HTML specification, yes. But you presume all
browsers follow the spec.
You don't, but you should avoid that construct for compatibility reasons.
You do if the browser is IE 6, and maybe others.
As mentioned, best to avoid that construct altogether (that's what I
do). Then you can remain blissfully unaware of such idiosyncrasies (as
I am).

And actually, that's not quite accurate. The fact that IE6 ignores the
implications of that construct is an example of the incompatibilities I
advised to avoid. Without the - for - attribute, IE6 just doesn't make
the connection.

Yes, problem is that practices develop to avoid incompatibilities,
then after a while someone asks "why do we do that?" and everyone has
forgotten the answer.

The only answer for this one is that some browsers can't deal with that
construct. As for which browsers specifically; you are right, I
couldn't remember. Could be lots of them of course.

I don't know if there's any way to design around
that other than to fully document the code. Seems to be human nature.

Just use something like jQuery. It makes all browsers look exactly
alike. Well, except for IE6, IE7, IE8 in its default Compatibility
View, older versions of FF, Opera, Safari, etc. Er, scratch that.
Don't use jQuery.

Another example is getting the value of a select element - most modern
browsers will give the correct answer where the type is select-one and
all options have a value attribute given:

alert( selectElement.value );

but some ancient browser didn't (Navigator 4 or 5?), so we persist
with the clumsy:

I don't think there was any NN5 (didn't it get canceled?) And I don't
think the issue is relegated to NN4 either, but am not sure.

alert( selectElement.options[selectElement.selectedIndex].value )

It is a good candidate for a wrapper function.

and even then some browsers still get it wrong if the option has no
value attribute, so there's the tiresome "if there's no value, get the
text" loop.

Yes, that is irritating (and I've seen many examples of "major" scripts
getting it wrong). Best to use values.

Then some bright spark asks "Why don't we use selectElement.value?
Works in all the (very small number of modern) browsers I tested
in...".

Sure, why not use complicated CSS3 queries? The libraries that call QSA
will likely get them right (some feat) in a handful of the latest
browsers. Of course, their fallback code likely won't so compatibility
goes out the window. I can't understand how the developers can ignore
the tons of users who browse from work (businesses aren't known to be
quick to upgrade software, particularly browsers). It's like their only
goal is to make shiny demos that "work" in the very latest browsers (the
ones they profess to "care" about anyway). How most of the world
figured it was a good idea to buy in to such thoughtless designs is
beyond me.

And then there is type select-multiple to contend with, which HTML 5
doesn't fix.

As far as I am concerned, HTML5 does not yet exist. I see people using
its doctype and wonder what they are thinking. Perhaps that they are on
the cutting edge? Maybe they just want to add another "skill" to their
resumes (at the expense of their clients).

 

[David Mark]

I've done it this way as long as I can remember, even back in the IE6
days... I probably looked at the W3C page, did it the simplest way and
assumed IE was just silently doing its thing.

How can you guys tell whether IE6 has associated the label with the
control? Did it do anything noticeable, or are you testing it in a
screen reader or something?

Click the label. Does the associated control focus?

 

[nick]

According to the W3C HTML specification, yes. But you presume all
browsers follow the spec.

I've done it this way as long as I can remember, even back in the IE6
days... I probably looked at the W3C page, did it the simplest way and
assumed IE was just silently doing its thing.

How can you guys tell whether IE6 has associated the label with the
control? Did it do anything noticeable, or are you testing it in a
screen reader or something?

Seems you are right.

You do if the browser is IE 6, and maybe others.

And the user is impaired, and tech support still won't provide him
with a decent browser. It's only a label for a form element after all;
many authors omit them entirely. At least with nested elements it's
done, and done according to standard, so nobody can really bitch but
users of non-conforming browsers, and then they can bitch to their
browser vendor or network admin.

Still, I suppose it's best to add the 'for' attribute even if the
label contains the control. Thanks for pointing that out.

PS. Hey Nick, there's an Oxford (aka Harvard) comma for you. Do your
worst!

How's this?

Language warning:
<URL:

>

Not bad, not bad.

 

[nick]

nick wrote:

Click the label.  Does the associated control focus?  

Heh, wow. All this time I thought IE6 just didn't focus controls for
labels at all. The more you know.