以下のコードでは、建物用と部屋用の 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、safrai のいずれかでも開いてください。最初にインターネット エクスプローラー以外のブラウザーのいずれかでアプリにテキスト メッセージを送信して、アプリの動作を確認してから、インターネット エクスプローラーでテストします。自分で問題を確認し、私が達成しようとしていることを確認できます。
アプリケーション (Internet Explorer と他の 1 つの主要なブラウザーで開いてください)
アップデート：
<!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>