在IE上更新選擇標記與Ajax時出現問題

Question

更新標記選項時，內部html funcion有問題。在第一個選擇標記中，我選擇了一個國家，並且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瀏覽器，它返回「Undifined」。我正在使用Jquery追加xmlhttp.responseText，因爲IE不支持selecthtml的innerhtml。 noConflict函數用於避免mootolls和jquery庫之間的衝突。我不能將選擇標籤放在div中，而是隻打印選項而不是打印選項，因爲我使用的自定義選擇是在發生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和.innerHtml（）與AJAX調用相同的問題。我通過使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>'; 
    } 
?> 

希望這有助於。