我正在用 PHP 编写一个页面，并且我正在尝试根据前一个下拉列表的值填充一个下拉列表。这在 Firefox 中完美运行，但在 Internet Explorer 中根本不起作用。我想知道它是否可以在 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>
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;
}
}
后端 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;
?>
就像我说的那样，这在 Firefox 中非常有效，但在 IE 中根本不行。任何输入（正面或负面）将不胜感激。另外，我不能使用 jQuery。
=========================================
编辑
=========================================
作为这篇文章的后续，我应用了在 PHP 端使用 json_encode 和在 JavaScript 端使用 JSON.parse 的建议技术。这确实可以使用 Internet Explorer；但是，对于返回数千次点击的数据库调用，它确实会减慢浏览器的速度……很多！这是我现在正在使用的，使用从 data.gov 网站获得的 FEMA 灾难列表：
JavaScript：
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++;
}
}
}
后端 PHP：
<?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;
?>
我从 data.gov 得到的数据文件超过 131K 行，所以一些数据库查询可以返回几千行。我知道这很多，但 innerHTML 方法确实比 DOM 方法工作得更快。也许有一种更有效的方法可以做到这一点。如果是这样，我将不胜感激有关此事的任何意见。