The onclick event does not work for options

Question

Following is my code which works fine in firefox but not in chrome. Kindly let me know how to solve this issue. The main idea is to call a js function based on the selected

Answer 1

I've made an interesting discovery, that has a material impact on this question. NOTE: this occurs on Chrome Version 63.0.3239.108 (Official Build) (64-bit), running on Windows 7. What I report here may differ on Chrome running on other platforms, but it is worth investigating anyway, in case the same solution works on other platforms.

I wrote some code, to create pop up dialogues, allowing me to select various options. The code allows the dialogues to appear one on top of the other in sequence, and be dismissed in reverse order. This code was then coupled to two dialogues, both containing select controls.

I then wrote a function, to populate those select controls with option elements, which attached click event listeners to the options. The function was duly called to attach data to the options being appended to the relevant select controls.

Dialogue #1 was then launched. The select control was manipulated, and the click event duly fired on the options I selected, all easily observable courtesy of [1] tracing through the Crome debugger, and [2] the effect the event listener code had on other DOM elements in the dialogue.

Dialogue #2 was then launched, and overlaid over Dialogue #1.

The select control was then manipulated, and ... no click events were fired.

What was the difference?

The difference, was that the select control on Dialogue #1, had a size attribute set (in particular, size="5"). The select control on Dialogue #2, did not have a size attribute set.

The moment I set the size attribute on the select control on Dialogue #2, click events were properly fired once more.

If you want click events to work with options in a select control on Chrome, you must set a size attribute on the select control, viz:

If you omit this attribute from your select control, click events will be ignored.

It now remains to be determined, if one has to set the size attribute directly in the HTML file before running the JavaScript code, or whether setting a size attribute in JavaScript before attaching options will also work. Let me get back on this one while I test it.

EDIT: I've just tested to see if adding a size attribute to the select control in JavaScript, instead of in the HTML file, works as a means of enabling proper handling of click events on option elements in Chrome (version details the same as before), and this also works. So, code such as:

sel = document.getElementById("PickSecondaryClue");
sel.setAttribute("size","5");

will also work.

Apparently, there are special caveats applicable to the size attribute in Chrome to take account of - certain values are documented, at least in some versions, as exhibiting unexpected side effects.

Now it remains to see if this works in Firefox too.

EDIT 2: Also works in Firefox. (57.0.2 64-bit)