一段 jquery 代码在 Internet Explorer 中不起作用答案

【问题标题】：piece of jquery code not working in internet explorer一段 jquery 代码在 Internet Explorer 中不起作用
【发布时间】：2012-12-24 22:55:23
【问题描述】：

我在下面有一段代码，它显示 2 个下拉菜单，一个用于建筑物，另一个用于房间。当用户从下拉菜单中选择建筑物时，它将使用 ajax 导航到 room.php，在该脚本中它编译查询并输出房间列表，然后显示在房间下拉菜单中页面：

         $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 之外的所有浏览器中使用。感谢一些关于 SO 的好建议，我被告知要验证脚本，因为 Internet Explorer 在验证代码时非常严格。

无论如何，在我的验证中，我意识到我有这个错误：

文档类型不允许此处的元素“选项”：

指向下面的这一行：

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

它声明它需要进入<select> 标记，我在技术上试图在上面的代码中执行此操作。我的问题是如何修复代码以通过验证但能够执行它的功能，即在从建筑物下拉菜单中选择建筑物后显示房间下拉菜单中的房间列表？

以下是应用程序，请在 Internet Explorer 以及 chrome、firefox、opera 或 safai 中打开应用程序。首先在其中一个非 Internet Explorer 浏览器中向应用发送文本，以查看应用的工作原理，然后在 Internet Explorer 中对其进行测试，您可以自己查看问题以及我想要实现的目标。

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

更新：

<!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>

【问题讨论】：

定义在 IE 中不起作用？
除了告诉我们它是如何失败的，请显示 html 和 ajax 响应的正文。
检查浏览器控制台中收到的实际响应数据...是否有任何垃圾以某种方式添加到其中？所有版本的IE都会出现问题吗？ IE 会抛出任何脚本错误吗？还可以尝试在成功回调中提醒数据以查看它是否正在触发...如果没有添加一些 ajax 错误处理并找出具体的 ajax 错误是什么
验证您的整个页面....根据您关于布局问题的其他帖子，您的页面中的 html 无效，因此 IE 在插入数据时遇到问题。选项卡是工具的“网络”。遇到此类问题时使用 W3C 验证器
在请求中它确实在选择建筑物时识别了 room.php 的 URL。我将在 W3Schools 中尝试验证

标签： php jquery html

【解决方案1】：

问题是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> 元素的直接子元素。

这在 Chrome 中工作的原因（例如）是 Chrome 仅将其附加到 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>

Chrome 不会在视觉上呈现 <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 将初始选项构建为 DOM 元素，而不是构建 HTML 字符串。我这样做是因为：

通常认为这是一种更好的做法。
它消除了通过字符串连接构建元素的需要。
它使我不必编写格式良好的 HTML（在长字符串上可能很难）。
不需要太多努力。

更新：

由于您已包含 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> 元素无关的所有内容。

【讨论】：

那么我需要删除 room.php 中选项标签上方和下方的所有代码吗？
@user1881090：更新答案。
您好，感谢您的 Jquery/DOM 方法，我标记了您的答案。对于其他人，您可以包括如何将 room.php 更改为仅为将看到此问题的其他人输出选项。我已将 room.php 包含在问题更新中
@user1881090：更新答案以反映新的 PHP 源代码。
感谢您的所有帮助皮特 :)