Javascript 为什么赢了'；我的AJAX函数是否正确地填充了Internet Explorer中的下拉列表？

我正在用PHP编写一个页面，并且我正在尝试填充一个下拉列表，给定前面下拉列表的值。这在Firefox中非常有效，但在InternetExplorer中根本不起作用。我想知道这是不是一个侥幸，它在Firefox中工作，而不是IE，或者如果我只是在我做这件事的方式的方式。以下是我所拥有的：

主页：

<select id="make" name="make" onChange="carCompanyListHandler(this.value);">
    <option selected disabled>Choose Make</option>
    <optgroup label="American Cars">
            <option value="chevrolet">Chevrolet</option>
            <option value="dodge">Dodge</option>
            <option value="ford">Ford</option>
            <option value="jeep">Jeep</option>
            <option value="tesla">Tesla</option>
    </optgroup>
    <optgroup label="UK Car Companies">
            <option value="astonmartin">Aston Martin</option>
            <option value="bentley">Bentley</option>
            <option value="landrover">Land Rover</option>
            <option value="lotus">Lotus</option>
            <option value="morgan">Morgan</option>
    </optgroup>
    <optgroup label="Japanese Cars">
            <option value="acura">Acura</option>
            <option value="mazda">Mazda</option>
            <option value="nissan">Nissan</option>
            <option value="subaru">Subaru</option>
            <option value="toyota">Toyota</option>
    </optgroup>
    <optgroup label="Italian Cars">
            <option value="alfaromeo">Alfa Romeo</option>
            <option value="ferrari">Ferrari</option>
            <option value="fiat">Fiat</option>
            <option value="lamborghini">Lamborghini</option>
            <option value="maserati">Maserati</option>
    </optgroup>
            <optgroup label="German Cars">
            <option value="audi">Audi</option>
            <option value="bmw">BMW</option>
            <option value="goliath">Goliath</option>
            <option value="porche">Porche</option>
            <option value="volkswagen">Volkswagen</option>
    </optgroup>
</select>

后端PHP：

<?php
    $carCompany = (isset($_GET['carCompany']) && $_GET['carCompany'] != "") ? $_GET['carCompany'] : null;
    $returnValue = null;

    error_log("The car company chosen was: " . $carCompany);

    switch($carCompany){
            case "chevrolet":
                    $returnValue = "<option value=\"camaro\">Camaro</option>\n<option value=\"corvette\">Corvette</option>\n<option value=\"lumina\">Lumina</option>\n<option value=\"silverado\">Silverado</option>\n<option value=\"volt\">Volt</option>\n";
                    break;
            case "dodge":
                    $returnValue = "<option value=\"avenger\">Avenger</option>\n<option value=\"challenger\">Challenger</option>\n<option value=\"charger\">Charger</option>\n<option value=\"dakota\">Dakota</option>\n<option value=\"ramcharger\">Ramcharger</option>\n";
                    break;
            case "ford":
                    $returnValue = "<option value=\"fiesta\">Fiesta</option>\n<option value=\"focus\">Focus</option>\n<option value=\"taurus\">Taurus</option>\n<option value=\"explorer\">Explorer</option>\n<option value=\"f150\">F-150</option>\n";
                    break;
            case "jeep":
                    $returnValue = "<option value=\"compass\">Compass</option>\n<option value=\"cherokee\">Cherokee</option>\n<option value=\"patriot\">Patriot</option>\n<option value=\"wrangler\">Wrangler</option>\n<option value=\"srt8\">SRT8</option>\n";
                    break;
            case "tesla":
                    $returnValue = "<option value=\"teslaroadster\">Tesla Roadster</option>\n<option value=\"models\">Model S</option>\n<option value=\"modelx\">Model X</option>\n";
                    break;
            case "astonmartin":
                    $returnValue = "<option value=\"v8vantage\">V8 Vantage</option>\n<option value=\"db9volante\">DB9 Volante</option>\n<option value=\"rapide\">Rapide</option>\n<option value=\"astonmartinv12zagato\">Aston Martin V12 Zagato</option>\n<option value=\"cygnet\">Cygnet</option>\n";
                    break;
            case "bentley":
                    $returnValue = "<option value=\"mulsanne\">Mulsanne</option>\n<option value=\"flyingspur\">Flying Spur</option>\n<option value=\"continentalgt\">Continental GT</option>\n<option value=\"continentalgtc\">Continental GTC</option>\n";
                    break;
            case "landrover":
                    $returnValue = "<option value=\"defender\">Defender</option>\n<option value=\"freelander\">Freelander</option>\n<option value=\"discovery\">Discovery</option>\n<option value=\"rangerover\">Range Rover</option>\n";
                    break;
            case "lotus":
                    $returnValue = "<option value=\"elise\">Elise</option>\n<option value=\"exige\">Exige</option>\n<option value=\"evora\">Evora</option>\n<option value=\"2eleven\">2-Eleven</option>\n";
                    break;
            case "morgan":
                    $returnValue = "<option value=\"evagt\">Eva GT</option>\n<option value=\"pluse\">Plus E</option>\n<option value=\"anniversdary4x4\">Anniversdary 4x4</option>\n<option value=\"aeroplus\">Aero Plus</option>\n<option value=\"roadster\">Roadster</option>\n";
                    break;
            case "acura":
                    $returnValue = "<option value=\"ilx\">ILX</option>\n<option value=\"MDX\">MDX</option>\n<option value=\"rdx\">RDX</option>\n<option value=\"tsx\">TSX</option>\n<option value=\"zdx\">ZDX</option>\n";
                    break;
            case "mazda":
                    $returnValue = "<option value=\"mazda2\">Mazda 2</option>\n<option value=\"mazda3\">Mazda 3</option>\n<option value=\"mazda6\">Mazda 6</option>\n<option value=\"mx5\">MX-5</option>\n<option value=\"cx5\">CX-5</option>\n";
                    break;
            case "nissan":
                    $returnValue = "<option value=\"leaf\">Leaf</option>\n<option value=\"sentra\">Sentra</option>\n<option value=\"altima\">Altima</option>\n<option value=\"cube\">Cube</option>\n<option value=\"titan\">Titan</option>\n";
                    break;
            case "subaru":
                    $returnValue = "<option value=\"brz\">BRZ</option>\n<option value=\"exiga\">Exiga</option>\n<option value=\"forester\">Forester</option>\n<option value=\"outback\">Outback</option>\n<option value=\"stella\">Stella</option>\n";
                    break;
            case "toyota":
                    $returnValue = "<option value=\"corolla\">Corolla</option>\n<option value=\"camry\">Camry</option>\n<option value=\"tacoma\">Tacoma</option>\n<option value=\"tundra\">Tundra</option>\n<option value=\"4runner\">4Runner</option>\n";
                    break;
            case "alfaromeo":
                    $returnValue = "<option value=\"4c\">4C</option>\n<option value=\"mito\">Mito</option>\n<option value=\"giulietta\">Giulietta</option>\n<option value=\"159\">159</option>\n<option value=\"quadrifoglio\">Quadrifoglio</option>\n";
                    break;
            case "ferrari":
                    $returnValue = "<option value=\"california\">California</option>\n<option value=\"458italia\">458 Italia</option>\n<option value=\"458spider\">458 Spider</option>\n<option value=\"f12berlinetta\">F12 Berlinetta</option>\n<option value=\"laferrari\">La Ferrari</option>\n";
                    break;
            case "fiat":
                    $returnValue = "<option value=\"punto\">Punto</option>\n<option value=\"panda\">Panda</option>\n<option value=\"500\">500</option>\n<option value=\"albea\">Albea</option>\n<option value=\"bravo\">Bravo</option>\n";
                    break;
            case "lamborghini":
                    $returnValue = "<option value=\"miura\">Miura</option>\n<option value=\"espada\">Espada</option>\n<option value=\"jarama\">Jarama</option>\n<option value=\"countach\">Countach</option>\n<option value=\"silhouette\">Silhouette</option>\n";
                    break;
            case "maserati":
                    $returnValue = "<option value=\"quattroporte\">Quattroporte</option>\n<option value=\"ghibli\">Ghibli</option>\n<option value=\"granturismo\">Gran Turismo</option>\n<option value=\"grancabrio\">Gran Cabrio</option>\n<option value=\"levante\">Levante</option>\n";
                    break;
            case "audi":
                    $returnValue = "<option value=\"a1\">A1</option>\n<option value=\"a8\">A8</option>\n<option value=\"s3\">S3</option>\n<option value=\"q5\">Q5</option>\n<option value=\"ttrs\">TT RS</option>\n";
                    break;
            case "bmw":
                    $returnValue = "<option value=\"1series\">1 Series</option>\n<option value=\"3series\">3series</option>\n<option value=\"5series\">5 Series</option>\n<option value=\"i3\">i3</option>\n<option value=\"x3\">X3</option>\n";
                    break;
            case "goliath":
                    $returnValue = "<option value=\"gp700\">GP 700</option>\n<option value=\"gp900\">GP 900</option>\n<option value=\"dreirad\">Dreirad</option>\n<option value=\"gv800\">GV 800</option>\n<option value=\"express\">Express</option>\n";
                    break;
            case "porche":
                    $returnValue = "<option value=\"911\">911</option>\n<option value=\"boxter\">Boxter</option>\n<option value=\"carrera\">Carrera</option>\n<option value=\"cayenne\">Cayenne</option>\n<option value=\"macan\">Macan</option>\n";
                    break;
            case "volkswagen":
                    $returnValue = "<option value=\"newbeetle\">New Beetle</option>\n<option value=\"jetta\">Jetta</option>\n<option value=\"passat\">Passat</option>\n<option value=\"touareg\">Touareg</option>\n<option value=\"phaeton\">Phaeton</option>\n";
                    break;
            default:
                    $returnValue = "<option selected disabled>Choose make</option>\n";
    }

    error_log("Here is the list of models: " . $returnValue);
    echo $returnValue;
?>

<?php
        $filter = (isset($_GET['filter']) && $_GET['filter'] != '') ? strip_tags($_GET['filter']) : null;
        $filterCriteria = (isset($_GET['filterCriteria']) && $_GET['filterCriteria'] != '') ? strip_tags($_GET['filterCriteria']) : null;
        $returnValue = null;
        $arrayOfResults = array();

        $query = "select fd.ID,fd.DisasterNumber,fd.DeclarationDate,i.IncidentType,s.State,fd.County,fd.ApplicantName,fd.EducationApplicant,fd.NumberOfProjects,fd.FederalShareObligated from DISASTERS fd join INCIDENTTYPE i on i.ID = fd.IncidentTypeID join STATE s on s.ID = fd.StateID where " . $filter . " like '%" . $filterCriteria . "%' order by State,County,IncidentType";
        error_log("Filter Query: " . $query);
        if($result = $dbConnection->query($query)){
                while($row = $result->fetch_object()){
                        $tmpArray = array();
                        $tmpArray['DisasterNumber'] = $row->DisasterNumber;
                        $tmpArray['DeclarationDate'] = $row->DeclarationDate;
                        $tmpArray['IncidentType'] = $row->IncidentType;
                        $tmpArray['State'] = $row->State;
                        $tmpArray['County'] = $row->County;
                        $tmpArray['ApplicantName'] = $row->ApplicantName;
                        $tmpArray['EducationApplicant'] = $row->EducationApplicant;
                        $tmpArray['NumberOfProjects'] = $row->NumberOfProjects;
                        $tmpArray['FederalShareObligated'] = $row->FederalShareObligated;
                        array_push($arrayOfResults, $tmpArray);
                }
                $result->close();
        }

        $returnValue = json_encode($arrayOfResults);

        error_log($returnValue);
        echo $returnValue;
?>

正如我所说，这在Firefox中工作得非常好，但在IE中根本不起作用。任何输入（正面或负面）都将非常感谢。此外，我不能使用jQuery

=======================================================

编辑

=======================================================

作为这篇文章的后续，我应用了建议的技术，在PHP端使用json_编码，在JavaScript端使用json.parse。这确实可以使用Internet Explorer工作；然而，由于数据库调用返回数千次点击，它确实减慢了浏览器的速度。。。很多以下是我现在正在处理的问题，使用我从data.gov网站上获得的FEMA灾难列表：

JavaScript:

function carCompanyListHandler(carCompany){
    xmlHttp = GetXmlHttpObject();

    if (xmlHttp == null){
            alert ("Browser does not support HTTP Request");
            return;
    }

    var url = "./ajaxprocessor.php?carCompany=" + carCompany;
    url = url + "&sid=" + Math.random();
    console.log(url);

    xmlHttp.onreadystatechange = populateModels;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

function populateModels(){
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
            var selectList = document.getElementById('model');
            var selectListOptions = xmlHttp.responseText;
            console.log(selectListOptions);
            selectList.innerHTML = selectListOptions;
            return;
    }
}

function filtered(){
    var tableBody = document.getElementById('tableToPopulate');
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
        var listOfDisasters = xmlHttp.responseText;
        var j = 0;
        for(var i=0; i<JSON.parse(listOfDisasters).length; i++){
            var disaster = JSON.parse(listOfDisasters)[i];
            var newRow = document.createElement("tr");
            for(var index in disaster){
                var newCell = document.createElement("td");
                var node = document.createTextNode(disaster[index]);
                newCell.appendChild(node);
                newRow.appendChild(newCell);
            }
            tableBody.appendChild(newRow);
            j++;
        }
    }
}

函数筛选（）{
var tableBody=document.getElementById（'tabletopulate'）；
如果（xmlHttp.readyState==4 | | xmlHttp.readyState==“完成”）{
var listOfDisasters=xmlHttp.responseText；
var j=0；
对于（var i=0；i

---

我从data.gov获得的数据文件超过131K行，因此一些数据库查询可以返回几千行。我知道这是很多，但innerHTML方法确实比DOM方法工作得更快。也许有一种更有效的方法可以做到这一点。如果是这样的话，我将非常感谢对此问题的任何意见。

。innerHTML

不是s大多数浏览器都支持它，但是你已经发现有些浏览器比其他浏览器更好。我认为特别是在表单的情况下，你可以看到一些奇怪的行为

正确的方法是使用DOM API：

var option = document.createElement("option");
option.setAttribute("value", value);
selectList.appendChild(option);

还有一些小的警告，但IE8及以上应该可以

console.log(selectListOptions);

---

可能在IE中不支持，请尝试注释这一行

IE的哪个版本？您在控制台中是否收到任何错误消息？

控制台。除非控制台打开，否则日志

在IE中不起作用。因此，只有在测试时才使用

console.log

。IE 8…没有错误，它根本不起作用。看起来它几乎可以在IE中工作t I get，看起来像什么，下拉列表为空。始终使用以正确编码查询字符串参数（变量名和值）。（在这种情况下这并不重要，但您可能最终尝试发送应编码的字符。）您还应该检查

xmlHttp.status

，它可能不是200。console.log（selectListOptions）输出是什么？那么，如果我的PHP函数发回多行，我该怎么做呢？划出每行的末尾，使用JavaScript“拆分”方法，并循环每一个？IE是第一个支持

.innerHTML

的浏览器。我也经常使用它，而且没有任何错误。@Brian您也可以发回JSON格式的文本并用JavaScript构建菜单。是的，我同意@MarcelKorpel。JSON在这方面非常好。用PHP和

构建您的选项数组>echo json_encode（$options）

。然后在JavaScript中你可以

json.parse（responseText）

，你就有了你的数组。@Brian注意，

json.parse

仅受IE>=8支持。对于低于此值的任何内容，请使用来自的

json2.js

或

json_sans\u eval

。