I’ve been back doing web development in PHP for a week or so now, and I’ve been trying to use AJAX to update one SELECT element with a new set of values when the value of a different SELECT element changes. I don’t see the need to reload the whole page just for this, so it’s a textbook example of when to use AJAX.
I normally use the .innerHTML value of an element to update the screen, but little did I know, there’s a bug in IE that causes this to fail when using it with a SELECT element. I spent about 3 hours trying to figure out why this works in Firefox, but not in IE.
I was just trying to set the innerHTML value to
<option value = "0">Value 1</option> <option value = "2">Value 2</option> <option value = "3">Value 3</option>
IE just wouldn’t fill the SELECT element at all. After lots of troubleshooting, I noticed that no matter what I put there, the opening tag was missing. This is why it wasn’t displaying. so when I put the value of innerHTML out to an alert box I got this:
Value 1</option> <option value = "2">Value 2</option> <option value = "3">Value 3</option>
After a bit of searching I found this Microsoft Knowledgebase Article from 2003! I’ve experienced it in IE 6 and IE 7, and it ridiculous that it hasn’t been fixed by now.
Anyway, there is another way to accomplish what I want to do:
var sel = document.getElementById('select1');
// Empty the select box
sel.options.length = 0;
sel.options[0] = new Option('Value 1', '0');
sel.options[1] = new Option('Value 2', '1');
sel.options[2] = new Option('Value 3', '2');I really hope this article saves somebody some time. It would have been much easier to deal with if Microsoft had a better Javascript debugger.
