HTML select from mysql based on previous select - php

Question

I am currently building a website. I want to implement a feature with 3 HTML select fields.
city
street
building
I was able to achieve full fetch of all distinct cities, streets and buildings. However, that is not exactly what I need, since they are all shuffled and you can't really see if a certain city has a certain street or not.
Here is the algorithm I have in mind:
Pre-requisite: All dropdowns besides city are disabled and are only enabled upon dropdown above selection.
Step 1: User selects city via dropdown
Step 2: All streets of that city are then fetched from MySQL into the street dropdown and it is now enabled.
Step 3: User selects street via dropdown
Step 4: All buildings of that street are then fetched from MySQL into the building dropdown and it is now enabled.
I am very new to website development, so please bear with me here and if possible - point me in the right direction.
My current implementation:
<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

Your algorithm could work like that.
But you may need to reload the page or fetch the content with a asynchronous request (for example AJAX) if the user selected a city. You could pass the city as a GET- or POST-Parameter, and if that Parameter is set search for the streets and enable the dropdown, else just disable the dropwdown menu. The same applies for the buildings.
And please use Prepared Statements instead of normal queries when using a query with user input, you don't want to get visited by Little Bobby Tables ;)

Answer 2

I have found a solution to this and it is quite simple.
.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));
}