Question

我在这里搜索过这个问题，但我的问题没有合适的答案。所以更具体一点，我有2个选择选项，即楼层和房间。两种选择都基于数据库显示。那么是否有一种语法可以获取所选的楼层ID，以便我可以在提交之前进行查询以显示所选楼层的特定房间？这是我的代码：

<form name="form" method="POST">        
    <div class="form-group">
        <div><label>Floor Name</label></div>
            <select class="form-control" id="floorid" name="existfloorname">
                <option>None</option>
            <?php 
                $result = $conn->query("select * from floors");
                while ($row = $result->fetch_assoc()) 
                {
                    ?><option id="<?php echo $row['floorid'];?>" value="<?php echo $row['floorname']; ?>"><?php echo $row['floorname']; ?></option><?php
                }               
            ?>
            </select>
    </div>


    <div class="form-group">
        <div><label>Room Name</label></div>
            <select class="form-control" name="existroomname">
                <option>None</option>
            <?php 
                $result = $conn->query("select * from rooms where floorid = '".GETSELECTEDFLOORID."'");
                while ($row = $result->fetch_assoc()) 
                {
                    ?><option value="<?php echo $row['roomname']; ?>"><?php echo $row['roomname']; ?></option><?php
                }
            ?>
            </select>
    </div>
    <input type="submit" name="delete" value="Delete">
</form>

This is how the form looks like

Answer 1

您需要使用AJAX。 AJAX允许从前端（JS）向后端（PHP）发送数据。通过为您提供.ajax()方法，JQuery使这一过程变得简单。这就是你需要这样做的方式：

注意：您需要使用 jQuery 这样做

首先，以这种方式重新排列HTML，请注意select ID：

<form name="form" method="POST">
    <div class="form-group">
        <div><label>Floor Name</label></div>
        <select class="form-control" id="floor_select" name="existfloorname">
            <option>None</option>
            <?php
            $floors = $conn->query("select * from floors");
            while ($row = $floors->fetch_assoc()){ ?>
                 <option value="<?= $row['floorid']; ?>"><?= $row['floorname']; ?></option>
            <?php } ?>
        </select>
    </div>

    <div class="form-group">
        <div><label>Room Name</label></div>
        <select class="form-control" id="room_select" name="existroomname">
            <option>None</option>
        </select>
    </div>
    <input type="submit" name="delete" value="Delete">
</form>

第二次，创建你的jQuery ajax调用：

    $(document).on("change", 'select#floor_select', function(e) {
        var floor_id = $(this).val();

        $.ajax({
            type: "POST",
            data: {floor_id: floor_id},
            url: 'get_room_list.php',
            dataType: 'json',
            success: function(json) {
                var $el = $("select#room_select");
                $el.empty(); // remove old options
                $el.append("<option>Please Select</option>");
                //iterate through your results and add to your dropdown
                $.each(json, function(k, v) {
                    $el.append("<option value='" + v.id + "'>" + v.roomname + "</option>");
                });
            }
        });

    });

第三次，创建上面的AJAX调用正在寻找的PHP脚本。称之为get_room_list.php：

<?php
$result = $conn->query("select * from rooms where floorid = '" . GETSELECTEDFLOORID . "'");
while ($row = $result->fetch_assoc()) {
    $results[] = $row;
}
header('Content-Type: application/json');
echo json_encode($results);

完成上述所有操作后，您应该能够获得所需的信息。每次＆＃34;楼层名称＆＃34; select已更改，JS将向PHP发送POST请求（通过AJAX），PHP将返回＆＃34; rooms＆＃34;得到JSON格式，然后迭代创建下拉列表。

希望这一切都有意义。

祝你好运。

Answer 2

您可能需要AJAX才能获得每个楼层的列表空间。

在提交之前从选择选项中POST或GET选择的值（同一页面）

2 个答案: