Question

更新标签选项时，我遇到内部html功能问题。在第一个选择标记中，我正在选择一个国家/地区，而ajax代码必须更新另一个选择标记中的城市。我的代码适用于IE以外的所有主流浏览器。这是调用php脚本的js代码：

>function show_zones(str)
>{
>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('region_to').innerHTML="";
>   jQuery.noConflict();
>   (function($) {
>   $('#region_to').append(xmlhttp.responseText);
>   })(jQuery);
>   alert(xmlhttp.responseText);
>   }
>  }
>xmlhttp.open("GET","ajax/zones.php?country="+str,true);
>xmlhttp.send();
>}

在所有浏览器中，警报代码返回适当的选项标记，但在IE中它返回“未确定”。我正在使用Jquery附加xmlhttp.responseText，因为IE不支持selecth标签的innerhtml。 noConflict函数用于避免mootolls和jquery库之间的冲突。我不能只在div中放置select标签并打印它而不是只打印选项，因为我在使用window.onload事件时由js代码创建的自定义选择。

这是php代码：

>require_once("../../connect.php");
>$country_query="SELECT* FROM `tour_countries` WHERE  >country_name='".$_GET['country']."'";
>$country_result=mysql_query($country_query);
>$country_row=mysql_fetch_array($country_result);
>$zone_query="SELECT* FROM `tour_zones` WHERE country_ID='".$country_row[0]."'";
>$zone_result=mysql_query($zone_query);
>while($zone_row=mysql_fetch_array($zone_result))
>{
>   echo '<option value="'.$zone_row[1].'">'.$zone_row[1].'</option>';
>}

感谢您的回复，并为我可怜的englesh道歉。

Answer 1

我和IE和带有ajax调用的.innerHtml（）有同样的问题。我通过使AJAX成为POST请求并使用jQuery .html（）而不是.innerHTML（）来解决它，出于某种原因，IE对于innerHtml（）来说非常糟糕。这是我使用的工作函数：

function getCitiesFromState(state, select, spinnerNum)
{
    if (window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var ran = Math.round((new Date()).getTime() / 1000),
    terms = "state="+state+'&r='+ran;

    xmlhttp.open("POST","ajax5.php",true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    /***********************************************************
    * These two lines cause Chrome to throw non-fatal errors.
    * Removing them didn't change the functionality of the
    * request, but this may end up needing a conditional.
    ***********************************************************/
    //xmlhttp.setRequestHeader('Content-length', terms.length);
    //xmlhttp.setRequestHeader('Connection', 'close');

    xmlhttp.onreadystatechange = function()
    {
        $('#spinner'+spinnerNum).fadeIn(300);

        if (xmlhttp.readyState  == 4 
         && xmlhttp.status      == 200)
        {
            $('#spinner'+spinnerNum).fadeOut(100);
            $('#'+select).html(xmlhttp.responseText);
        }
    }

    xmlhttp.send(terms);
}

和ajax5.php文件：

<?php
    include 'db.class2.php';
    $DB = new DB_MySql2;
    $DB->connect();

    $state = mysql_real_escape_string($_POST['state']);

    $q = $DB->query("SELECT DISTINCT `city`, `zip_code`
                     FROM `usa_master` 
                     WHERE `state` = '".$state."' 
                     GROUP BY `city`
                     ORDER BY `population` DESC LIMIT 0, 150");

    while($r = $DB->fetch_assoc($q)) {
        $city[] = $r['city'];
        $zips[] = $r['zip_code'];
    }

    array_multisort($city, $zips);

    echo '<option value="" selected="selected">Select City</option>';
    $size = sizeof($city);

    for ($x = 0; $x < $size; $x++)
    {
        if (strlen($zips[$x]) == 4)
        {
            $zips[$x] = '0' . $zips[$x];
        }

        echo '<option class="city_list" value="'.$zips[$x].'">'.$city[$x].'</option>';
    }
?>

希望这有帮助。

在IE上用ajax更新select标签时出现问题

1 个答案: