Nicolas Bouvrette Nicolas Bouvrette - 4 years ago 79
Javascript Question

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

I'm trying to add custom style to a

<select>
element and because of cross-browsers limitation I would either need to know:


  1. When a select dropdown is expanded (I did a quick Google search and it didn't seem possible)

  2. 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.

Answer Source

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:

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

Given this bad mix, I had to resort to :

  1. Use a condition for IE <= 10 browsers.
  2. Add a onkeydown event to fix Firefox's onchange situation.
  3. 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download