Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Accessing a <select> <option> ?

3 views
Skip to first unread message

Mel Smith

unread,
May 22, 2012, 3:18:18 PM5/22/12
to
Hi:

When a user clicks on an <option> (in one of my three <select> lists, I
wish to have a specific function executed.

In my body 'onload' property/function, I call a function -- part of
which is shown below

*********************
el = memberopts[i] ; // memberopts is an array
el.id = "imem" + el.value ; // place an 'ID' in this option
el.onclick = myfunc ; // this is my misunderstanding here :(((
// I'm guessing that I can't use 'onclick' here above, and I'm missing
something fundamental
// in my understanding of the properties of <option> (i.e., selected,
index, disabled, etc)

*************************

But, when I click on any option, the function myfunc() is not executed
??? (I put a simple alert in there and it does not show).

btw, I have a lot of behind-the-scenes stuff to do, when a user clicks
an <option> of a <select>.

Any suggestions please ??

Thank you.

--
Mel Smith


Mel Smith

unread,
May 22, 2012, 3:43:46 PM5/22/12
to
Hi:

I checked on FF, and Chrome, and it seems to work !

However, on IE7, it does not (at least my Alerts in the called function
do not display :(( )


I'll look further.

Thank you

-Mel


Matt McDonald

unread,
May 22, 2012, 4:43:39 PM5/22/12
to
On 12-05-22 01:18 PM, Mel Smith wrote:

> In my body 'onload' property/function, I call a function --
> part of which is shown below

[quote trimmed and cleaned up]

I'm assuming that you mean the `onload` attribute of the
body element. You may be interested in the following snippet[0]
from the HTML (5) specification:

"The onblur, onerror, onfocus, onload, and onscroll event
handlers of the Window object, exposed on the body element,
shadow the generic event handlers with the same names normally
supported by HTML elements."

In my experience, using the `onload` attribute of the body
element or the `onload` property of the Window object (for
Unobtrusive JavaScript zealots) is more stable than the
`onload` property of the body element (confirmed as absent
in Firefox 1-6 and Safari 3.1-4.)

> But, when I click on any option, the function myfunc() is not
> executed ??? (I put a simple alert in there and it does not
> show).

[quote trimmed and cleaned up]

Yes; you are correct in noting that the `click` event does
not work well with option elements. Perhaps, as has been
suggested in various threads before, you could add a `blur`
and/or `focus` event handler to the select element and track
"changes" that way. The first selected option (presence of
the `multiple` boolean attribute was not specified) can be
retrieved via the `selectedIndex`[1] property of the
`HTMLSelectElement`interface.

(e.g. `var curOption = sel.options[sel.selectedIndex];`)

[0]: http://www.whatwg.org/specs/web-apps/current-work/multipage
/sections.html#the-body-element
[1]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85676760

--
Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada

Mel Smith

unread,
May 22, 2012, 5:09:24 PM5/22/12
to
Matt said:
[snip]

> Yes; you are correct in noting that the `click` event does
> not work well with option elements. Perhaps, as has been
> suggested in various threads before, you could add a `blur`
> and/or `focus` event handler to the select element and track
> "changes" that way. The first selected option (presence of
> the `multiple` boolean attribute was not specified) can be
> retrieved via the `selectedIndex`[1] property of the
> `HTMLSelectElement`interface.
>

Hi Matt:
Yes, I use -- and have used many times the '<body
onload="somefunction();" >' -- and it always seemed to work on *other*
elements (e.g., <input>, etc).

In IE 7, in my sequence of commands, where I assign a unique ID to each
of my options, and then 'look' at these options thru Alerts, they IDs *do*
exist.

In current versions of FF and Chrome, the 'optel.onclick=myFunc' works
perfectly !!!, but in IE7 it is ignored (that is, myFunc is not executed??

(btw, Matt I live/work in St. Alberta, AB just a couple of miles from you
:)) Also, one of my sons is a business manager with a computer systems
development firm in Edmonton. Let me know if you'd like to touch bases with
him. )

> (e.g. `var curOption = sel.options[sel.selectedIndex];`)

I'll give that a try --- but I'm disappointed that IE7 can't work like
FF & Chrome (and I do all my developing in IE7, and check my work on the
other browsers frequently.

Mel Smith

unread,
May 22, 2012, 10:26:11 PM5/22/12
to
Matt said:

"Mel Smith" <med_cuto...@aol.com> wrote in message
news:a22dkb...@mid.individual.net...
> Matt said:
> [snip]
>
>> Yes; you are correct in noting that the `click` event does
>> not work well with option elements. Perhaps, as has been
>> suggested in various threads before, you could add a `blur`
>> and/or `focus` event handler to the select element and track
>> "changes" that way. The first selected option (presence of
>> the `multiple` boolean attribute was not specified) can be
>> retrieved via the `selectedIndex`[1] property of the
>> `HTMLSelectElement`interface.
>>

Matt:

I've included the <select> element and the selectedIndex into my page,
and now things work great !

Thank you.

-Mel Smith


SAM

unread,
May 23, 2012, 3:17:13 PM5/23/12
to
Le 22/05/12 21:18, Mel Smith a écrit :
>
> But, when I click on any option, the function myfunc() is not executed
> ??? (I put a simple alert in there and it does not show).
>
> Any suggestions please ??

I thinck you can't attribute an onclick to an option
the onclick is for the all select (as 'onchange' for instance)


so I think you must use something like :

<select onchange="myFunction(this)">
<option>
<option>
...

function myFunction(what) {
var i = what.selectedIndex,
k = what.options[i].value;
alert(k);
switch(i) {
case 0: doThat(); break;
case 3: doThis(); break;
}
}

--
Stéphane Moriaux avec/with iMac-intel

Mel Smith

unread,
May 23, 2012, 3:42:55 PM5/23/12
to
Stephane a dit:

>
> I thinck you can't attribute an onclick to an option
> the onclick is for the all select (as 'onchange' for instance)
>
>
> so I think you must use something like :
>
> <select onchange="myFunction(this)">
> <option>
> <option>
> ...
>
> function myFunction(what) {
> var i = what.selectedIndex,
> k = what.options[i].value;
> alert(k);
> switch(i) {
> case 0: doThat(); break;
> case 3: doThis(); break;
> }
> }

Hi Stephane:

Yes, I'm doing the above now successfully, but thanks for your response
!

(btw, I'm posting another question in a few minutes re: auto-scrolling
of <option>s in a <select> list.)

-Mel Smith


Evertjan.

unread,
May 23, 2012, 5:17:13 PM5/23/12
to
Modern browsers do not need this selectedIndex thing:

=====================================
<script type='text/javascript'>
function f(t) {
alert(t);
switch(t) {
case 1: alert('a'); break;
case 2: alert('b'); break;
};
};
</script>

<select onchange='f(+this.value);'>
<option>--</option>
<option value=1>a</option>
<option value=2>b</option>
</select>
=====================================


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0 new messages