Select lists not populating in Internet Exporer

AJAX, Internet Explorer, select lists,

[travelorama]

Dear all,

Normally I will try to solve any problem before I turn for help here, but as I am stuck, I've come here as my last resort for help.

I am trying to dynamically populate a <select> with values returned from a PHP script using AJAX.

Here is the scenario:

I have two <select> fields:

<select name="types" id="types" onChange="GetOptions('makes', this.options[this.selectedIndex].value);">
<option value="1>Make1</option>

<select name="makes" id="makes"></select>

The idea is to populate the second list with values returned by the GetOptions.php script.

The data is submitted to an AJAX script:

var xmlHttp

function GetOptions(action, id )
{

var action;
var id;
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="GetOptions.php"
url=url+"?action="+action
url=url+"&id="+id
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("POST",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 ¦¦ xmlHttp.readyState=="complete")
{
var update = xmlHttp.responseText.split('¦');
var id = update[0];
document.getElementById(id).innerHTML = update[1];
alert (res);
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

The response from GetOptions.php is:

makes¦<option value = "121212">Model</option>

I am trying to populate a second <select> which id is <select id="make"> with the values returned from GetOptions.php

The problem: everything works like a charm in FF, but IE fails to populate the second Select list with the options.

I have tried alert(update[1]) and it does pop-up an alert box with all the <option value="...">...</option>, but sadly the list itself is not populated.

Any ideas on how to solve this pesky problem?

Your feedback is much appreciated.

[RonPK]

You may need to use the Option() constructor. It creates a new option object, which can than be added to the seelct box.

Syntax:

var myOption = new Option(text, value, defaultSelected, selected);

defaultSelected

and

selected

are boolean values: true or false.

Add it like this:

mySelectbox.options[3] = myOption;

That should make it the 4th option.