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

我认为您可以使用第一种选择，这很容易..