Simon Willison’s Weblog

Javascript debugging: IE Option gotcha

13th December 2003

I’ve been debugging Javascript today. I like Javascript as a language, but I doubt anyone would disagree that it’s a horrible, horrible language to debug across multiple browsers. Firebird at least has good debugging support—I currently use the Javascript Console and Jesse Ruderman’s shell bookmarklet and I really need to learn to use Venkman some day. If anyone knows a better way of debugging Javascript in IE than relying on the lame popup box I’d love to hear about it.

In any case, one bug that I successfully vanquished today involved the humble <option> element. My HTML looked something like this:

<select name="categories" multiple="multiple" id="catfrom" size="20">
 <option>entertainment</option>
 <option>movies</option>
 <option>sports</option>
 <option>news</option>
</select>

I was having all kinds of strange problems in IE, which I finally tracked down to the following gotcha: in IE, the value property of an Option object is empty if the corresponding option tag doesn’t have a value attribute. This is counter-intuitive because in HTML if an option attribute is omitted the text inside the option element is used as the value instead. Mozilla browsers duplicate this in their handling of the Option object; IE doesn’t. Hopefully this tip will save someone some debugging time in the future.

Update: David Lindquist pointed me to Microsoft’s free Script Debugger.