Ajax not working in IE8 on dropdown but it's working fine in other browsers

Question

My ajax code is working fine in other browsers but in IE it's not working well.

It's creating XMLHTTPRequest but the value from my PHP script is only an empty list!

Here's my Javascript:

<script type="text/javascript">
    function getcity()
    {
        $('#stateerr').hide();
        state=document.getElementById("ddlstate").value;
       // alert(state);
        var xmlhttp;
        if (window.XMLHttpRequest)
          {
              alert('in this');
          xmlhttp=new XMLHttpRequest();
          alert(xmlhttp);
          }
        else
          {
            alert('in that');
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("ddlcity").innerHTML=xmlhttp.responseText;
           alert(xmlhttp.responseText);
            }
          }
          var str="getcity.php?q="+state;
         // alert(str);
        xmlhttp.open("GET",str,true);
        xmlhttp.send();
    }



    function getlocation()
    {
        $('#cityerr').hide();
        city=document.getElementById("ddlcity").value;
        //alert(state);
        var xmlhttp;
        if (window.XMLHttpRequest)
          {
          xmlhttp=new XMLHttpRequest();
          }
        else
          {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("ddllocality").innerHTML=xmlhttp.responseText;
           // alert('inhttpresponse');
            }
          }
          var str="getlocation.php?q="+city;
         // alert(str);
        xmlhttp.open("GET",str,true);
        xmlhttp.send();
    }
</script>

Here's my HTML form:

<form name="search" action="search.php" method="GET" onsubmit="return searchCheck()">
<table width=100% >
                <tr>
                    <td colspan=3>
                    <div class="backgroundgif" id="backgroundgif" style="height:30px;width:100%">
                    <span style="font-size:15px; color:#CCFFFF;">
                    Search Property
                    </span>
                    </div>
                    </td>
                </tr>
                <tr>
                    <td>Property For
                    </td>
                    <td>
                        Rent <input type="checkbox" name="rentchkbox" id="rentchkbox" value="1" onclick="getRentPriceRange()"/>  
                        Sell<input type="checkbox" name="sellchkbox" id="sellchkbox" value="1"  onclick="getSellPriceRange()"/>      
                    </td>


                </tr>
                <tr>
                    <td>
                        Purpose
                    </td>
                    <td>
                        <select name="purpose">
                        <option>Family</option>
                        <option>Student</option>
                        <option>s</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Price range
                    </td>
                    <td>
                        <select name="ddlamount1" id="ddlamount1" onchange="hideerr()">
                            <option>select checkbox</option> 
                        </select>
                    </td>
                     <td><div id="ddlamount1err" style="display:none"><img src="IMAGES/errorsmall.png"/></div></td>
                </tr>
                <tr>
                    <td>
                        State
                    </td>
                    <td>
                        <select name="ddlstate" id="ddlstate" onchange="getcity()">
                            <option>select state</option>
                            <option>MAHARASTRA</option>
                        </select>
                    </td>
                    <td><div id="stateerr" style="display:none"><img src="IMAGES/errorsmall.png"/></div></td>
                </tr>
                <tr>
                    <td>
                        City
                    </td>
                    <td>
                        <select name="ddlcity" id="ddlcity" onchange="getlocation()">
                            <option>select city</option>
                            <option>PUNE</option>
                        </select>
                    </td>
                    <td><div id="cityerr" style="display:none"><img src="IMAGES/errorsmall.png"/></div></td>

                </tr>
                <tr>
                    <td>
                        Locality
                    </td>
                    <td>
                        <select name="ddllocality" id="ddllocality">
                            <option>Select Locality</option>
                            <option>indra nagar</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                       <input type="submit" value="Search">
                    </td>
                </tr>
                </table>
                </form>

And here's my PHP script. The code gets cities from the state dropdown.

<?php
require_once('connection_class2.php');
$connection=new Dbconnection;
$query="select country_id from country where country_name='$_GET[q]'";
$result=$connection->select($query);
while($row=mysqli_fetch_object($result))
{
 $country_id=$row->country_id;
}

$query1="select state_name from state where country_id='$country_id'";
$result1=$connection->select($query1);

echo '<option>';
echo 'select state';
echo '</option>';
while($rw=mysqli_fetch_object($result1))
{
 $state_name=$rw->state_name;
echo '<option>';
echo $state_name;
echo '</option>';
}
?>

There are other functions in the form for validation, but I have omitted them because they seem irrelevant.

Answer 1

The innerHTML option wont work for select element in IE..

So its better to create the whole select element with options from your php file and return them .

then have a div for placing the select box and use the normal innerHTML property to add the content.

Else

You have to add options using javascript and it differs for IE and others.. The following example adds an element dynamically to the select box..

function displayResult()
{
var x=document.getElementById("mySelect");
var option=document.createElement("option");
option.text="Kiwi";
try
  {
  // for IE earlier than version 8
  x.add(option,x.options[null]);
  }
catch (e)
  {
  x.add(option,null);
  }
}

I think u can use the first option and that would be easy..