Tuesday, 9 January 2007

Internet Explorer - Drop Kicks with DOM Selects

What day would be complete in the Web IT world without Internet Explorer, and it's shopping list of problems, showing up to crash the party. Take the following (edited) code I was debugging today:
// Get a <select> list
ddlFoo = document.getElementById("ddlFoo");
item = dropdownlist[3]; // Get the third item in the list

// Get another <select> list
ddlBar = document.getElementById("ddlBar");
ddlBar.add(item, null); // Add the item to the list
Internet Explorer 6, however, does things slightly differently, and requires try{} and catch{} statements to cater for this.

If you just stopped there you will still receive an Invalid Argument error - so what gives? It turns out that IE has problems handling the type casts of the list items. The solution is to create a new list item, assign its value and text, and then add the item to the list.

Rejoice, it now works.

If this isn't enough, this problem continues in Internet Explorer 7, which still follows Microsoft's method of add(). I'm also informed that IE does not handle innerHTML for selects, even though Microsoft invented it. Good work, Microsoft.

Copyright © 2008 - FoetalPosition - is proudly powered by Blogger
Blogger Template