Ajax在下拉列表中無法在IE8中工作，但在其他瀏覽器中工作正常

Question

我的ajax代碼在其他瀏覽器中工作正常，但在IE中效果不佳。

它正在創建XMLHTTPRequest，但是我的PHP腳本中的值只是一個空列表！

這是我的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>

這是我的HTML表單：

<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>

這是我的PHP腳本。 該代碼從州下拉列表中獲取城市。

<?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>';
}
?>

表單中還有其他功能可用於驗證，但是我忽略了它們，因為它們似乎無關緊要。

Answer 1

innerHTML選項不適用於IE中的select元素。

因此，最好使用php文件中的選項創建整個select元素並將其返回。

然后使用div放置選擇框，並使用常規的innerHTML屬性添加內容。

其他

您必須使用javascript添加選項，並且它對於IE和其他瀏覽器有所不同。以下示例將元素動態添加到選擇框。

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);
  }
}

我認為您可以使用第一種選擇，這很容易..