Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Bug in JavaScript? - optgroups

Status
Not open for further replies.
LFI

LFI

Programmer
Apr 27, 1999
1,996
US
Hey all!

Anyone encounter this one before?

I have a SELECT list and am dividing it into OPTGROUPs. The SELECT has an ONCHANGE event associated with it, but get this: it doesn't fire when using the up/down arrow keys to change options from the last of one optgroup to the first of another or back!

Here's a little code to show you what I mean:

Code: 
<html>
<head>
<title>select list optgroup</title>
</head>
<body>
<select onchange='alert("hey!")'>
<optgroup label='Marx Brothers'>
<option>Groucho</option>
<option>Chico</option>
<option>Harpo</option>
<option>Zeppo</option>
<option>Gummo</option>
</optgroup>
<optgroup label='Abbot and Costello'>
<option>Bud Abbot</option>
<option>Lou Costello</option>
</optgroup>
</select>
</body>
</html>

From the drop-down, choose 'Gummo'. You should get an alert that says 'hey!'.

Then use your down-arrow to choose 'Bud Abbot'. It's at this point I would expect another 'hey!', but nothing comes.

Use your up-arrow to go back. Again, nothing.

Use your up- or down-arrows to get between any other two options (i.e., staying within a single OPTGROUP) and you get the expected 'hey!' message.

Bug?

This is a hypothetical scenario, but not too far-removed from my actual need (only the names have been changed...). The solution I'm looking at is to have two drop-downs where the first determines the options selectable in the second.

To tell you the truth, I'm not a fan of OPTGROUPs, but in the particular project I'm working on, it feels right to use them, so if someone has a better solution than my two-drop-down-list solution mentioned above, I'd love to hear it!

--Dave
 
Sort by date Sort by votes
I don't get the same action as you describe. Although I can navigate through the list with my arrow keys, moving from one group to another doesn't fire the onchange event. It only fires with a click or Enter keypress. When you think about it, this just makes sense because nothing has really "changed" even though you have scrolled through the list with the arrow keys. This would be the same as if you used the scroll bar to cycle through the available choices without making a selection. If memory serves, the onchange event fires only with a mouse click or other keypress that would register the change or would cause the element to lose focus.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
'sounds like you're opening the list and then using the up/down arrow keys.

Actually select an option. What I see when I do that is the list closes, the selected option is in the field, and the field is blue (still selected).

From this condition, use the up/down arrow keys. My list does not re-open. Rather, the selected value changes.

Is that what you were doing?


Thanks for checking it out!

--Dave
 
Upvote 0 Downvote
Yes, I see the same thing. The point is that until you clcik a selection or press the Enter/Tab key, the onchange event won't fire because nothing has changed since the last selection.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
The way I see it, if the list is closed (not dropped down), then whatever appears in the drop-down "window" is what is selected. Notice what happens if you go UP from Gummo, rather than down. The list responds by throwing the alert message.

I'm using IE6, by the way.

--Dave
 
Upvote 0 Downvote
I've tested it in IE6, Mozilla, and Firefox and I don't get any alert except when I click on a selection, press Enter or Tab out of the box. I won't debate the way you see it but the fact still remains that unless you take an action on the select list, then you can "Arrow" scroll all you want and the onchange event won't fire. I don't make the rules - I just code by them.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
This is really strange. Thanks, though, tviman, for taking the time to check it on different browsers.

I've tested it again and again and the onchange event is firing when (1) the list is in focus AND (2) the list is closed (not dropped down) AND (3) I use the arrow keys (up or down) to change the option that is selected (except when it switches optgroups).

I got the same effect at work and at home.

Anyone else?

--Dave
 
Upvote 0 Downvote
IE6: onchange won't fire while switching optgroups using up/down keys. Also: looks like "disabled" property doesn't work.
ff0.8: "keyboard" onchange fires only after listbox loses focus. Disabled stuff works.

Btw. try with <select size="9"> - IE behaves the same, ff works OK.
 
Upvote 0 Downvote
Thanks! I was wondering if I was going crazy!

Looking at the list with size=9 is very illustrative.

Thanks again!

--Dave
 
Upvote 0 Downvote
i believe this is working properly. using winxp pro:

ie6 fires the event every time i change options using arrow keys (actually i think ie is wrong to do this before blurring the field)

ff 0.9 fires the event upon blurring the field




=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
Jeff,

With IE6, does the alert fire even when switching from Gummo to Bud Abbot (using arrow keys)?

'seems like it's acting differently for a lot of people!

--Dave
 
Upvote 0 Downvote
aha...in ie6, no it doesn't! possibly a bug. ff0.9 works fine.


=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
794
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
392
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
381
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
776
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top