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>

更新：

Application

在应用程序中，从下拉菜单中选择“模块”并提交。
下面应该会显示一些功能。在“评估”下拉菜单中选择任何评估。
您可以在下面看到“当前评估详细信息” 在readonly文本输入中显示建筑物和房间表明评估的当前建筑和房间是什么。
我希望在下拉列表中选择相同的建筑物和房间 “新评估室”部分中的菜单。你可以看到建筑物在建筑物下拉菜单中选择，但房间是没有在房间下拉菜单中选择。

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
只需在getRooms()之前添加var editroom即可填充#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){}。注意请注意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的其余部分

不在下拉菜单中显示所选选项

1 个答案: