this.value is working on Firefox, but not in Internet Explorer?

Question

I have an onChange event on a select.

When I do an alert(this.value), it's working on Firefox, but not on Internet Explorer. Why not?

This is the code:

<select onchange="new Ajax.Updater('fiches', '/~project/index.php/folder/fiche', {asynchronous:true, evalScripts:true, parameters:'fiche=' + this.value});" class="input" id="fiche" name="fiche">
  <option value="0">Choisir ma fiche</option>
  <option value="1">Vous etes salariés</option>
  <option value="2">Sans emploi</option>
</select>

Answer 1

Try this.options[this.selectedIndex].value.

Answer 2

It looks like you're using Prototype. Try calling $F(this) rather than this.value.

Answer 3

I have had similar problems in the past with IE and selects. The value property of select items is a pain in IE. Usually the solution is to care about the selected option (not the select element) and access to its text attribute.

I'll do this in Jquery to access the text selected:

$("#my_select_item option:selected").text()

So, in raw javascript it should be something like:

document.getElementById("myselect").options[document.getElementById("myselect").selectedIndex)].text

or

document.getElementById("myselect").options[document.getElementById("myselect").selectedIndex)].value

That is the general idea to make selects + JS happen in IE.