在下拉菜單中不顯示選定的選項

Question

下面我有一段代碼，它假設顯示2個下拉菜單，一個用於建築和其他房間。當用戶從建築物下拉菜單中選擇建築物時，使用ajax/jquery它將導航到room.php頁面，並列出屬於所選建築物的房間並顯示房間列表中的房間下拉菜單。這工作得很好：

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

... 

<?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>'; 

?> 

room.php：

$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; 

我有但問題是，當用戶選擇的評估，這是假設顯示在評估的建築和房間選擇相關的下拉菜單。但它不會選擇這些選項，而是保留在「請選擇」選項中。爲什麼是這個，我怎樣才能得到顯示的選項？

下面是視圖源代碼：

//Assessment drop down menu: 

    <p><strong>Assessments:</strong> <select name="session" id="sessionsDrop"> 
    <option value="">Please Select</option> 
    <option value='71' style='color: green'>AKXMB - 30-11-2012 - 10:00</option> 
    </select> </p> 
    </form> 

    //Building drop down menu: 

    <select name="buildings" id="buildingsDrop" onchange="getRooms();"> 
    <option value="">Please Select</option> 
    <option value='Canalside East'>Canalside East</option> 
    <option value='Canalside West'>Canalside West</option> 
    </select> 


    //Room drop down menu (list of rooms displayed in room.php): 

    <select name="rooms" id="roomsDrop"> 
    <option value="">Please Select</option> 
    </select> 

    //Retrieve assessment information 
    //(Below is where problem lies where it is not selecting building and room options in drop down menu) 
    <script type="text/javascript"> 

$(document).ready(function(){ 

       var sessioninfo = [{"SessionId":71,"Building":"Canalside East","Room":"CE01\/04"},{"SessionId":84,"Building":"Canalside East","Room":"CE01\/04"}]; 

       $('#sessionsDrop').change(function(){ 

        var sessionId = $(this).val(); 

        if (sessionId !== '') { 
       for (var i = 0, l = sessioninfo.length; i < l; i++) 
       { 
         if (sessioninfo[i].SessionId == sessionId) { 

       var currentbuilding = $('#currentBuilding').val(sessioninfo[i].Building); 
       var editbuilding = $('#BuildingsDrop').val(sessioninfo[i].Building); 
       var currentroom = $('#currentRoom').val(sessioninfo[i].Room); 
       var editroom = $('#RoomsDrop').val(sessioninfo[i].Room); 
       var currentid = $('#currentId').val(sessioninfo[i].SessionId); 
       var editid = $('#newId').val(sessioninfo[i].SessionId); 

         break; 
       } 
       } 
      } 

       }); 
      }); 
</script> 

UPDATE：

Application

• 在應用程序中選擇從下拉菜單，並提交一個 「模塊」。

• 下面應該顯示一些功能。在評估下拉菜單 中選擇任何評估。

• 您可以在下方看到「當前評估詳情」它 顯示在只讀的文本輸入 大樓和客房指出哪些是評估目前的建築和房間。

• 我想要在「新評估室」部分的下拉菜單 中選擇相同的建築物和房間。您可以在建築物下拉菜單中看到 建築物被選中，但未在房間下拉菜單中選擇的房間爲 。

Answer 1

除非這是一個複製/粘貼錯誤，你缺少周圍的評價函數/腳本的<script></script>標籤 -

<script type="text/javascript"> 
$(document).ready(function(){ 

... 
    }); 
</script> 

---

編輯

你的問題是，您的id的錯誤情況 -

 ... 
     var editbuilding = $('#BuildingsDrop').val(sessioninfo[i].Building); 
     ... 
     var editroom = $('#RoomsDrop').val(sessioninfo[i].Room); 

更改爲 -

 ... 
     var editbuilding = $('#buildingsDrop').val(sessioninfo[i].Building); 
     ... 
     var editroom = $('#roomsDrop').val(sessioninfo[i].Room); 

也看到 - In the DOM are node ids case sensititve?

編輯 - 2
只是var editroom之前只需添加getRooms()填充#roomsDrop，那麼你可以設置選擇。

var currentbuilding = $('#currentBuilding').val(sessioninfo[i].Building); 
var editbuilding = $('#buildingsDrop').val(sessioninfo[i].Building); 
var currentroom = $('#currentRoom').val(sessioninfo[i].Room); 
getRooms(); 
var editroom = $('#roomsDrop').val(sessioninfo[i].Room); 
var currentid = $('#currentId').val(sessioninfo[i].SessionId); 
var editid = $('#newId').val(sessioninfo[i].SessionId); 

編輯 - 3

默認情況下，$.ajax異步運行在瀏覽器中，這樣的問題是，你越來越以success: function(response){}在function getRooms()之前它已經轉移到var editroom = $('#roomsDrop').val(sessioninfo[i].Room);，由於jQuery('#roomsDrop').append(response);沒有將選項值附加到roomsDrop沒有什麼可選的。這可以被固定在兩個方面 -

（1）速戰速決使用async: false

<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 }, 
      async: false, 
      success: function(response){ 
       jQuery('#roomsDrop').append(response); 
      } 
     }); 
} 
</script> 

這使得$.ajax調用同步，所以不會繼續var editroom = $('#roomsDrop').val(sessioninfo[i].Room);直到success: function(response){}完成後。 note請注意，async: false會在瀏覽器等待響應時凍結，因此可能會阻止任何其他操作。使用

（2）一個回調函數 -

<script type="text/javascript"> 
    function getRooms(callback) { 
    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 }, 
      async: false, 
      success: function(response){ 
       jQuery('#roomsDrop').append(response); 
       callback(); 
      } 
     }); 
} 
</script>  

和

getRooms(function(){ 
var editroom = $('#roomsDrop').val(sessioninfo[i].Room);}); 

這個回調函數將執行var editroom = $('#roomsDrop').val(sessioninfo[i].Room);後getRooms()已經完成，但將繼續script其餘無舉起瀏覽器