HTML select 来自 mysql 基于之前的 select

Question

我目前正在建设一个网站。我想用 3 HTML select 个字段实现一个功能。

city
street
building

我能够完全获取所有不同的城市、街道和建筑物。然而，这并不是我所需要的，因为它们都被打乱了，你无法真正看到某个城市是否有某条街道。

这是我想到的算法：

先决条件：除 city 之外的所有下拉菜单均已禁用，仅在 selection 以上的下拉菜单中启用。

第 1 步：用户 selects city 通过下拉菜单
第 2 步：然后将 city 中的所有 streets 从 MySQL 提取到 street 下拉列表中，现在已启用。
第 3 步：用户 selects street 通过下拉菜单
第 4 步：然后将 street 中的所有 buildings 从 MySQL 提取到 building 下拉列表中，现在已启用。

我是网站开发的新手，所以请耐心等待，如果可能的话 - 为我指明正确的方向。

我当前的实现：

<select name="city">
                <?php
                if ($result = mysqli_query($conn, $queryCity)) {
                    if (mysqli_num_rows($result) > 0) {
                        while ($row = mysqli_fetch_array($result)) {
                            echo "<option value='" . $row['city'] . "'>" . $row['city'] . "</option>";
                            $selected = $row['city'];
                        }
                    }
                }
                ?>
            </select>
            <select name="street">
                <?php
                if ($result = mysqli_query($conn, $queryStreet)) {
                    if (mysqli_num_rows($result) > 0) {
                        while ($row = mysqli_fetch_array($result)) {
                            echo "<option value='" . $row['city'] . "'>" . $row['city'] . "</option>";
                            $selected = $row['city'];
                        }
                    }
                }
                ?>
            </select>
            <select name="building">
                <?php
                if ($result = mysqli_query($conn, $queryBuilding)) {
                    if (mysqli_num_rows($result) > 0) {
                        while ($row = mysqli_fetch_array($result)) {
                            echo "<option value='" . $row['city'] . "'>" . $row['city'] . "</option>";
                            $selected = $row['city'];
                        }
                    }
                }
                ?>
            </select>

Answer 1

你的算法可以这样工作。
但是如果用户选择了一个城市，您可能需要重新加载页面或使用异步请求（例如 AJAX）获取内容。您可以将城市作为 GET- 或 POST-Parameter 传递，如果设置了该参数，则搜索街道并启用下拉菜单，否则只需禁用下拉菜单。建筑物也是如此。

并且在使用带有用户输入的查询时，请使用准备好的语句而不是普通查询，您不希望被 Little Bobby Tables 访问；）

Answer 2

我已经找到了解决这个问题的方法，而且非常简单。

.js:

function getBuildings() {
    let street = document.getElementById("street").value;

    let ajax = new XMLHttpRequest();
    let method = "POST";
    let url = "get_buildings_of_street.php";
    let asynchronous = true;
    const obj = {};
    obj.street = street;

    ajax.open(method, url, asynchronous);
    ajax.setRequestHeader("Content-type", "application/json");
    ajax.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            let data = JSON.parse(this.responseText);
            let html = "<select>";
            html += "<option value='" + "-" + "'>" + "-" + "</option>";
            for (let a = 0; a < data.length; a++) {
                html += "<option value='" + data[a] + "'>";
                html += data[a];
                html += "</option>";
            }
            html += "</select>";
            document.getElementById("building").innerHTML = html;
        }
    }
    ajax.send(JSON.stringify(obj));
}

HTML select 来自 mysql 基于之前的 select

HTML select from mysql based on previous select

html

php

html-select