1

以下のコードでは、建物用と部屋用の 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>
4

1 に答える 1

2

問題は、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>

<title>Chrome は要素内の、<meta>、または<link>要素を視覚的にレンダリングしません<select>

これを修正するには、少なくともいくつかの方法があります。

  1. 要素room.phpのみを出力するように変更します。<option>
  2. 返された要素getRooms()のみを追加するように関数を変更します。<option>

上記の 2 つの修正のどちらに従うかについては、他に何を使用しているかによって異なりますroom.php。これには他にも解決策がありますが (私は確信しています)、最終的には PHP を修正するか、AJAX 呼び出しを修正することになります。

の PHP ソースを見room.phpないと、最初のことはどうしようもありません。2番目は次のように行うことができます:

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);
        }
    });
}

HTML 文字列を構築する代わりに、jQuery を使用して初期オプションを DOM 要素として構築していることにお気付きかもしれません。私がそうした理由:

  1. 一般的には、より良い方法と考えられています。
  2. 文字列を連結して要素を作成する必要がなくなります。
  3. これにより、整形式の HTML (長い文字列では困難な場合があります) を作成する必要がなくなります。
  4. それをするのに多くの努力は必要ありません。

アップデート:

の PHP ソースを含めたので、次のように要素room.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-25T04:37:13.800 に答える