一段jQuery代碼不能在Internet Explorer中工作

我有一段代碼，下面顯示2個下拉菜單，一個用於建築物和其他房間。當用戶從下拉菜單中選擇建築物時，它將使用ajax導航到room.php，在該腳本中編譯查詢並輸出房間列表，然後在房間下拉菜單中顯示該房間列表頁面：一段jQuery代碼不能在Internet Explorer中工作

  $sql = "SELECT DISTINCT Building FROM Room"; 

$sqlstmt=$mysqli->prepare($sql); 

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbBuilding); 

$buildings = array(); // easier if you don't use generic names for data 

$buildingHTML = ""; 
$buildingHTML .= '<select name="buildings" id="buildingsDrop" onchange="getRooms();">'.PHP_EOL; 
$buildingHTML .= '<option value="">Please Select</option>'.PHP_EOL; 

while($sqlstmt->fetch()) 
{ 
    $building = $dbBuilding; 
    $buildingHTML .= "<option value='".$building."'>" . $building . "</option>".PHP_EOL; 
    } 

    $buildingHTML .= '</select>'; 

    $roomHTML = ""; 
    $roomHTML .= '<select name="rooms" id="roomsDrop">'.PHP_EOL; 
    $roomHTML .= '<option value="">Please Select</option>'.PHP_EOL; 
    $roomHTML .= '</select>'; 


     ?> 

<script type="text/javascript"> 

     function getRooms() { 
    var building = jQuery("#buildingsDrop").val(); 
    jQuery('#roomsDrop').empty(); 
    jQuery('#roomsDrop').html('<option value="">Please Select</option>'); 
    jQuery.ajax({ 
      type: "post", 
      url: "room.php", 
      data: { building:building }, 
      success: function(response){ 
       jQuery('#roomsDrop').append(response); 
      } 
     }); 


} 

</script>

現在上面的代碼適用於除Internet Explorer之外的所有瀏覽器。感謝一些偉大的建議，所以我被告知要驗證腳本，因爲在驗證代碼時，Internet Explorer非常嚴格。

在我的驗證

反正我知道我有這樣的錯誤：

document type does not allow element "option" here :

指着下面這一行：

jQuery('#roomsDrop').html('<option value="">Please Select</option>');

它指出，它需要去一個<select>標籤，該標籤我在技術上努力在上面的代碼中做。我的問題是，如何修復代碼以通過驗證，但是能夠執行它所做的功能，即在從建築物下拉菜單中選擇建築物後顯示房間列表下拉菜單中的房間列表？

下面是應用程序，請在Internet Explorer中打開應用程序，也可以在Chrome，Firefox，Opera或safrai中打開應用程序。先在其中一個非Internet Explorer瀏覽器中將應用程序文本化，以查看該應用程序的工作方式，然後在Internet Explorer中對其進行測試，然後您可以看到自己的問題以及我試圖實現的目標。

Application (Please open in Internet Explorer and in one other major browser)

UPDATE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title>Room </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="roomStyle.css"> 
</head> 



<body> 

<?php 

    // connect to the database 
include('connect.php'); 

/* check connection */ 
if (mysqli_connect_errno()) { 
printf("Connect failed: %s\n", mysqli_connect_error()); 
die(); 
} 


$building = isset($_POST['building']) ? $_POST['building'] : ''; 

$sql = "SELECT Room FROM Room WHERE Building = ?"; 

$sqlstmt=$mysqli->prepare($sql); 

$sqlstmt->bind_param("s",$building); 

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbRoom); 


$roomHTML = ""; 

while($sqlstmt->fetch()) { 
    $roomHTML .= "<option value='".$dbRoom."'>" . $dbRoom . "</option>".PHP_EOL; 
} 


echo $roomHTML; 

$sqlstmt->execute(); 


?> 
</body> 
</html>

來源

2012-12-24 user1881090

定義在IE中不起作用？ –

除了告訴我們它是如何失敗的，請顯示html和ajax響應的主體。 – GreyBeardedGeek

檢查在瀏覽器控制檯收到的實際響應數據...是否有任何垃圾被添加到它？所有版本的IE都會出現問題嗎？ IE會拋出任何腳本錯誤？也嘗試提醒數據在成功回調，看看它是否正在發射...如果不添加一些Ajax錯誤處理，並找出具體的Ajax錯誤是 – charlietfl

的問題是，room.php將返回此：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title>Room </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="roomStyle.css"> 
</head> 



<body> 

<option value='CW2/08'>CW2/08</option> 
<option value='CW4/09'>CW4/09</option> 
<option value='CW4/10'>CW4/10</option> 
<option value='CW5/10'>CW5/10</option> 
</body> 
</html>

時，它應該只返回這個（根據你如何使用響應）：

<option value='CW2/08'>CW2/08</option> 
<option value='CW4/09'>CW4/09</option> 
<option value='CW4/10'>CW4/10</option> 
<option value='CW5/10'>CW5/10</option>

儘管我不喜歡這麼說，但Internet Explorer是正確的（在這種情況下）。 <option>元素不應該是<body>元素的直接子元素。

這在瀏覽器工作的原因（例如）是鉻僅追加此給select#roomDrop：

<title>Room </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<link rel="stylesheet" type="text/css" href="roomStyle.css"> 
<option value="CW2/08">CW2/08</option> 
<option value="CW4/09">CW4/09</option> 
<option value="CW4/10">CW4/10</option> 
<option value="CW5/10">CW5/10</option>

和鉻不可視地呈現在<select>元件的<title>，<meta>，或<link>元件。

至少有幾種方法可以解決這個問題。

更改room.php只能輸出<option>元素。
將您的getRooms()函數更改爲僅追加返回的<option>元素。

至於這兩個補丁的上述效仿，這將取決於你正在使用room.php的什麼。還有其他解決方案（我相信），但最終這些解決方案將歸結爲修復PHP或修復AJAX調用。

沒有看到room.php的PHP源代碼，我無法幫助第一個。第二個可以做像這樣：

function getRooms() { 
    'use strict'; 
    var building = jQuery("#buildingsDrop").val(), 
     //use jQuery (or plain JavaScript) to build the option as a DOM element 
     defaultOption = $('<option />').text('Please Select').val(''); 
    //append the DOM element, not an HTML string 
    jQuery('#roomsDrop').empty().append(defaultOption); 
    jQuery.ajax({ 
     "type": "post", 
     "url": "room.php", 
     "data": { 
      "building": building 
     }, 
     "success": function (response) { 
      //filter out the option elements 
      var opts = $(response).filter('option'); 
      //and append only those 
      jQuery('#roomsDrop').append(opts); 
     }, 
     "error": function (jqXHR, textStatus, errorThrown) { 
      //always good to have an error handler. 
      console.log(textStatus); 
      console.log(errorThrown); 
     } 
    }); 
}

您可能注意到，我用jQuery來構建，而不是建立一個HTML字符串初始選項作爲DOM元素。我這樣做是因爲：

這通常被認爲是一種更好的做法。
它消除了通過字符串連接構建元素的需要。
它使我無需編寫格式良好的HTML（這對長字符串來說很難）。
這並不需要很多努力。

UPDATE：

當您爲room.php PHP源代碼，可以將其修改爲僅輸出像這樣的<option>元素：

<?php 
    // connect to the database 
    include('connect.php'); 
    /* check connection */ 
    if (mysqli_connect_errno()) { 
     printf("Connect failed: %s\n", mysqli_connect_error()); 
     die(); 
    } 
    $building = isset($_POST['building']) ? $_POST['building'] : ''; 

    $sql = "SELECT Room FROM Room WHERE Building = ?"; 
    $sqlstmt=$mysqli->prepare($sql); 
    $sqlstmt->bind_param("s",$building); 
    $sqlstmt->execute(); 
    $sqlstmt->bind_result($dbRoom); 

    $roomHTML = ""; 

    while($sqlstmt->fetch()) { 
     $roomHTML .= "<option value='".$dbRoom."'>" . $dbRoom . "</option>".PHP_EOL; 
    } 
    echo $roomHTML; 
    $sqlstmt->execute(); 
?>

這是說，簡單地消除與<option>元素無關的所有內容。

來源

2012-12-25 04:37:13 pete

因此，我需要刪除room.php中選項標籤上方和下方的所有代碼？ – user1881090

@ user1881090：已更新的答案。 – pete

嗨，我標記你的答案感謝您的JQuery/DOM方法。對於其他人，你可以包括如何改變room.php爲只有輸出選項的人才能看到這個問題。我在問題更新 – user1881090

一段jQuery代碼不能在Internet Explorer中工作

回答

相關問題