Ajax 和 PHP 驱动的下拉列表在 Internet Explorer 中不起作用答案

【问题标题】：Ajax and PHP powered drop down list wont work in Internet ExplorerAjax 和 PHP 驱动的下拉列表在 Internet Explorer 中不起作用
【发布时间】：2011-10-09 14:56:45
【问题描述】：

您好，我在 IE 中遇到了 ajax 脚本的问题，它似乎在所有其他浏览器中都可以正常工作。我正在尝试重新编写一个下拉列表以显示不同的价格范围，具体取决于用户是要租还是要购买，这就是我的解决方法

标题部分的功能：

<script type="text/javascript">
function showPrice(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    } 

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","getprice.php?q="+str,true);
    xmlhttp.send();
}
</script>

这是制作表格的 HTML 代码：

<table>
<form method="GET" action="search_results.php">
<tr>
    <td>
        <select name="type" style="width:120px">
            <option selected="selected" value="residential">residential</option>
            <option value="commercial">commercial</option>
            <option value="business">business</option>
            <option value="student">student &amp; sharers</option>
        </select>
    </td>
    <td>
        <select name="offered" style="width:120px" onchange="showPrice(this.value)">
            <option selected="selected" value="for_sale">for sale</option>
            <option value="to_let">to let</option>
        </select>
    </td>
    <td>
        <select name="area"  style="width:120px">
            <option selected="selected" value="any">any area</option>
            <?php 
                $sql="select * from areas;";
                $result=mysql_query($sql);

                while($data=mysql_fetch_array($result))
                {
                    $area=$data['area'];
                    echo "<option value='$area'>$area</option>";
                }
            ?>
        </select>
    </td>
</tr>
<tr id="txtHint">
    <td>
        <select name='minprice' style="width:120px">
            <option selected='selected' value=''>min price</option>
            <option value='50000'>&pound;50,000</option>
            <option value='75000'>&pound;75,000</option>
            <option value='100000'>&pound;100,000</option>
            <option value='125000'>&pound;125,000</option>
            <option value='150000'>&pound;150,000</option>
            <option value='175000'>&pound;175,000</option>
            <option value='200000'>&pound;200,000</option>
            <option value='250000'>&pound;250,000</option>
            <option value='300000'>&pound;300,000</option>
            <option value='400000'>&pound;400,000</option>
            <option value='500000'>&pound;500,000</option>
            <option value='750000'>&pound;750,000</option>
            <option value='1000000'>&pound;1,000,000</option>
            <option value='1500000'>&pound;1,500,000</option>
        </select>
    </td>
    <td>
        <select name='maxprice' style="width:120px">
            <option selected='selected' value=''>max price</option>
            <option value='50000'>&pound;50,000</option>
            <option value='75000'>&pound;75,000</option>
            <option value='100000'>&pound;100,000</option>
            <option value='125000'>&pound;125,000</option>
            <option value='150000'>&pound;150,000</option>
            <option value='175000'>&pound;175,000</option>
            <option value='200000'>&pound;200,000</option>
            <option value='250000'>&pound;250,000</option>
            <option value='300000'>&pound;300,000</option>
            <option value='400000'>&pound;400,000</option>
            <option value='500000'>&pound;500,000</option>
            <option value='750000'>&pound;750,000</option>
            <option value='1000000'>&pound;1,000,000</option>
            <option value='1500000'>&pound;1,500,000</option>
        </select>
    </td>
    <td>
        <select name="bedrooms" style="width:120px">
            <option selected="selected" value="">Bedrooms</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5 or more</option>
        </select>
    </td>
</tr>
</form>
</table>

这是决定是否回显情人价格范围或上限价格范围的 php 文件：

<?php
$q=$_GET["q"];

if($q=="to_let")
{
<td>
    <select name='minprice' style='width:120px'>
        <option selected='selected' value=''>min price</option>
        <option value='250'>&pound;250</option>
        <option value='500'>&pound;500</option>
        <option value='750'>&pound;750</option>
        <option value='1000'>&pound;1000</option>
        <option value='1250'>&pound;1250</option>
        <option value='1500'>&pound;1500</option>
        <option value='2000'>&pound;2000</option>
    </select>
</td>
<td>
    <select name='maxprice' style='width:120px'>
        <option selected='selected' value=''>max price</option>
        <option value='250'>&pound;250</option>
        <option value='500'>&pound;500</option>
        <option value='750'>&pound;750</option>
        <option value='1000'>&pound;1000</option>
        <option value='1250'>&pound;1250</option>
        <option value='1500'>&pound;1500</option>
        <option value='2000'>&pound;2000</option>
    </select>
</td>
<td>
    <select name='bedrooms' style='width:120px'>
        <option selected='selected' value=''>Bedrooms</option>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5 or more</option>
    </select>
</td>
PRICE;
}
else
{
    $my_string = <<<PRICE
    <td>
        <select name='minprice' style='width:120px'>
            <option selected='selected' value=''>minimum price</option>
            <option value='50000'>&pound;50,000</option>
            <option value='75000'>&pound;75,000</option>
            <option value='100000'>&pound;100,000</option>
            <option value='125000'>&pound;125,000</option>
            <option value='150000'>&pound;150,000</option>
            <option value='175000'>&pound;175,000</option>
            <option value='200000'>&pound;200,000</option>
            <option value='250000'>&pound;250,000</option>
            <option value='300000'>&pound;300,000</option>
            <option value='400000'>&pound;400,000</option>
            <option value='500000'>&pound;500,000</option>
            <option value='750000'>&pound;750,000</option>
            <option value='1000000'>&pound;1,000,000</option>
            <option value='1500000'>&pound;1,500,000</option>
    </select>
</td>
<td>
    <select name='maxprice' style='width:120px'>
        <option selected='selected' value=''>maximum price</option>
        <option value='50000'>&pound;50,000</option>
        <option value='75000'>&pound;75,000</option>
        <option value='100000'>&pound;100,000</option>
        <option value='125000'>&pound;125,000</option>
        <option value='150000'>&pound;150,000</option>
        <option value='175000'>&pound;175,000</option>
        <option value='200000'>&pound;200,000</option>
        <option value='250000'>&pound;250,000</option>
        <option value='300000'>&pound;300,000</option>
        <option value='400000'>&pound;400,000</option>
        <option value='500000'>&pound;500,000</option>
        <option value='750000'>&pound;750,000</option>
        <option value='1000000'>&pound;1,000,000</option>
        <option value='1500000'>&pound;1,500,000</option>
    </select>
</td>
<td>
    <select name='bedrooms' style='width:120px'>
        <option selected='selected' value=''>Bedrooms</option>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5 or more</option>
    </select>
</td>

PRICE;
}

echo $my_string;
?>

这似乎在 FF、Safari 和 Chrome 中运行得非常好，只是在 IE 中不行，我看到过类似的问题，但没有什么可以解决这个特定问题。

对此的任何帮助或建议将不胜感激。

【问题讨论】：

这太低效了。请加载 jQuery 并使用它加上 JSON。不要尝试加载表格行的 innerhtml。它只是不跨浏览器
感谢您的建议，但问题是我对 JQuery 和 JSON 没有太多经验，也许我会研究一下。我已经解决了这个问题，正如你所说，尝试加载表格行内部 html 是 Internet Explorer 的一个问题。我刚刚将整个表格放在一个 div 中并写入 div 内部 html。可能不是最有效或最优雅的解决方案，但可能是在我掌握 JQuery 和 JSON 之前的短期修复。 :)
再看一遍，我发现差别是如此之小。我建议你加载两个集合并通过隐藏或显示在它们之间切换：function showPrice(letOrSale) { var forSale = letOrSale==="for_sale"; document.getElementById('forLetId').style.display=forSale?"none":""; document.getElementById('forSaleId').style.display=forSale?"":"none"; }
非常感谢您花时间查看我的问题并提出解决方案，非常棒！我在默认情况下加载两个集合时遇到了一个小问题，但我通过使用调用函数解决了这个问题......非常好的解决方案谢谢！

标签： php javascript ajax drop-down-menu onchange

【解决方案1】：

促进评论回答：

我建议你加载两个集合并通过隐藏或显示在它们之间切换：

window.onload=function() {
  showPrice('for_sale'); // or do this in CSS
}
function showPrice(letOrSale) { 
  var forSale = letOrSale==="for_sale";
  document.getElementById('forLetId').style.display=forSale?"none":"";
  document.getElementById('forSaleId').style.display=forSale?"":"none"; 
}

【讨论】：