design and development for the web

Mozilla Javascript Option Object

I was trouble-shooting a friend's DOM-Script the other day. It consisted of a form select element that was working in Firefox, but not in Explorer.

"Suprise, surprise," was my first thought. But, actually... Explorer had the correct behavior. For once.

The Markup

  1. Pepperoni
  2. Mushroom
  3. Sausage

The Setup

Notice how these option tags do not have a (value="Pepperoni") argument. This way of writing the options creates a browser compatibility issue IE (6 and 7) and Mozilla browsers.

What Mozilla is doing (and shouldn't be)
If no "value" property exists for a given option object, Mozilla will automatically populate the "value" property with the "text element" child node.

In reference to the first code-snippet, the following javascript should return NULL, but in Mozilla it returns "Pepperoni".

  1. alert(getElementById("favorite_topping_1").value);

The Next Question

If I were a browser developer, and I had to come up with the "correct" behavior for the following markup, what would it be?

  1. myText

There are only two possibilities here:

  1. The value is null
  2. The value is 'myText'

I'm going to go with the first one.

My sincerest apologies for offending anyone by not placing Canadian Bacon as an option in the example markup.

Tags: , , , , ,


Recommended Materials