Ajax on IE not populating second dropdownlist based on selection of first

[BenJaYin]

hi guys I have the following code that works fine in all browsers but all IE versions. When I select an option from the first drop down the second one is to be dynamically populated by details based on the first selection. Unfortunately in IE the second dropdown shrinks and nothing is displayed.

the alert(res) on the function onChangeAgentRegion1 function below displays the options attached but I think IE is unable to render this. Please any ideas

[U][B]Ajax code[/B][/U]

function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
  catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}


function onChangeAgentRegion1() 
{
	var w = document.agent.agentregion.selectedIndex;
	var selected_text = document.agent.agentregion.options[w].id;
	//alert(selected_text);
	document.agent.agentsubregion.enabled = true;
	document.getElementById('agentsubregion').innerHTML='<option>Loading...</option>';
    var xmlhttp=GetXmlHttpObject();
   
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }var date=new Date();
    var timestamp=date.getTime();
    var url="process.php";
    var param="region_id="+selected_text+"&timestamp="+timestamp;
    //alert(param);
    xmlhttp.onreadystatechange=function() 
    { 
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") 
        {
        	
            var res=xmlhttp.responseText;
           // alert(res);
            document.getElementById('agentsubregion').innerHTML=res;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); 
    xmlhttp.setRequestHeader("Content-length", param.length);
    
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(param);
    //alert("45678");
    
}

[U][B]php code[/B][/U]

<tr>
<td class="style66" width="179" valign="top">Agent Region(Head Office)  </td>
<td width="354" class="style64" valign="top">
<div >
<select name = "agentregion" id="agentregion" onchange="onChangeAgentRegion1();" class="style71" <?php echo $status;?>>
<option value="" selected>---Select Region ----</option>
<?php
getRegions($_SESSION['reg']);
?>
</select>
</div>
</td>			
</tr>
<tr>
<td class="style66" width="179" valign="top">Agent Sub - Region  </td>
<td width="354" class="style64" valign="top"><div align="left">
<select name = "agentsubregion" id="agentsubregion" class="style71"  >
<option value="" selected>---Select Sub-Region ----</option>
<?php
getSubRegions($_SESSION['reg']);
?>
</select>
</div></td>			
</tr>

[Airshow]

BenJaYin,

Try returning/replacing the entire <select>...</select> menu, not just the options.

Airshow

[BenJaYin]

I did include the <select> but could not get the second dropdownpopulated instead it shrunk as it has been doing on IE, and also some several dropdownlists were echoed on the page.
the below is what IE is unable to render yet other browsers can
echo "<option value ='".$row."' $state>".$row."</option>"

[Airshow]

If you return the entire <select>...</select>, then you must also make a change to the HTML to cause it to be inserted in the containing <div>, thus replacing the current <select>...</select>.

...
<td class="style66" width="179" valign="top">Agent Sub - Region  </td>
<td width="354" class="style64" valign="top"><div align="left" id="agentsubregion">
<select name = "agentsubregion" class="style71">
<option value="" selected>---Select Sub-Region ----</option>
<?php
getSubRegions($_SESSION['reg']);
?>
</select>
</div></td>
...

Note that the id="agentsubregion" attribute has been moved from the select tag to the containing div tag.

Airshow

[BenJaYin]

Hi Airshow,
I have effected the changes but unfortunately the option values are echoed back onto the page instead of being echoed into the drop down list. the second dropdown list disappears and the values are echoed as a sentence onto the location where the second dropdown list is meant to be

[Airshow]

In that case, you have to do something rather more tricky, and I think I'm right in saying I have provided a solution here on Daniweb at some time in the past.

I'm short of time right now. Do you mind if I leave you to search through my old posts to see if you can spot it?

Airshow