Is there a way to add Events on Select Option Elements in Chrome?

Question

I'm trying to add custom style to a <select> element and because of cross-browsers limitation I would either need to know:

When a select dropdown is expanded (I did a quick Google search and it didn't seem possible)
Add events on <option> elements

The second option seems to work in all browsers but Chrome. I would prefer to avoid doing some nasty browser detection so I'm looking for ways to solve either one of the two options if anyone has suggestion??

The following works in all browsers but Chrome:

<select id="gender" name="gender">
     <option></option>
     <option class="click">Male</option>
     <option>Female</option>
     <option>Other</option>
</select>

<script>
element = document.getElementById('gender');

for (var iterator = 0; iterator < element.options.length; iterator++) {
    var optionElement = element.options[iterator];
    if (optionElement.className == 'click') {
        optionElement.addEventListener('click', function() {alert('gender')})
    }
}
</script>

The reason I cannot use an event on <select> is because I need to know if the dropdown is expanded or not (point #1 above). I also considered using the onChange event but browsers seems to react differently to it. Some react when you click, other when you change the value.

Note that users can expand select elements and select options without clicking on them. — RobG, Dec 24 '15 at 22:42
http://stackoverflow.com/questions/19387634/detect-drop-down-openes Check this out. It is strange that other browser do detect click event on options. I would try referring rendering of dropdown on chrome or read documentation about it. (I couldnt find docs about rendering of chrome :( ) — pratikpawar, Dec 24 '15 at 22:46

score 0 · Accepted Answer · answered Dec 26 '15 at 22:11

It looks none of my two options are feasible (unless someone ways to fix broken events).

Option 1. I tried to implement some "expand tracker" on selects to know when the element was actually expanded but due to the different ways browsers deal with selects, it seems like mission impossible. And even if some sort of magic recipe is found, it will be fragile for any future browser update.

Option 2. Given that Firefox also misbehave with onchange events, I'm unaware of any ways to fix this sort of problems, nor how to force Chrome to react on event it seems to ignore (maybe some JavaScript Guru can chime in here with some funky solution but I would be surprised).

So after several attempts, it seems like there are 3 main discrepancy to how <select> behave:

IE 10 and lower use a very limited render engine for drop downs (as far as style goes).
Firefox does not deal properly with onchange events when using the keyboard.
Chrome does ignores <option> events.

Given this bad mix, I had to resort to :

Use a condition for IE <= 10 browsers.
Add a onkeydown event to fix Firefox's onchange situation.
Use select events only to bypass Chrome's limitation.

The rendering effect is not ideal on Firefox as there is some sort of delay, but this looks like it's as best as it will be given how non-standard <select> elements are.

I didn't get too much into the details of what I was trying to do but I was actually trying to implement a "placeholder style" on select elements to have a uniform look and feel on my forms. The fun part is how the different browsers deal with <select> styles and how style differ when the drop down is expanded and when it isn't.

score -1 · Answer 2 · answered Dec 25 '15 at 00:50

-1

Try this:

element = document.getElementById('gender');

element.addEventListener('change', function() {
    if (this.value === 'Male') {
        alert(this.value);
    }
});

This code has been tested with Chrome, Firefox and Safari on OSX.

answered Dec 25 '15 at 00:50

Will

1,718
3
15
23

Yes, you are pointing at the select element, not the option. My question regards the option. – Nicolas Bouvrette Dec 25 '15 at 05:30
But it gives you exactly what you want. Is there are reason why which approach doesn't work for you. If you have additional functions to execute, you can still do it based on the selection of the option being selected. – Will Dec 25 '15 at 08:28
Like I said, some browser react differently on the "onchange" event. Some are triggered when you click, other after you change the value. Since I need specific style when the select is expanded and when it's not, this won't work for my use case. – Nicolas Bouvrette Dec 25 '15 at 13:29

Is there a way to add Events on Select Option Elements in Chrome?

2 Answers2