Je construis actuellement un site Web. Je souhaite implémenter une fonctionnalité avec 3 champs de sélection HTML.

  • city
  • street
  • building

J'ai pu tirer pleinement parti de toutes les villes, rues et bâtiments distincts. Cependant, ce n'est pas exactement ce dont j'ai besoin, car ils sont tous mélangés et vous ne pouvez pas vraiment voir si une certaine ville a une certaine rue ou non.

Voici l'algorithme que j'ai en tête:

Pré-requis: toutes les listes déroulantes en plus de city sont désactivées et ne sont activées que lors de la liste déroulante au-dessus de la sélection.

  • Étape 1: l'utilisateur sélectionne city via le menu déroulant
  • Étape 2: Tous les streets de ces city sont ensuite récupérés de MySQL dans le menu déroulant street et il est maintenant activé.
  • Étape 3: l'utilisateur sélectionne street via le menu déroulant
  • Étape 4: Tous les buildings de ces street sont ensuite récupérés de MySQL dans le menu déroulant building et il est maintenant activé.

Je suis très nouveau dans le développement de sites Web, alors s'il vous plaît, soyez indulgents avec moi et, si possible, dirigez-moi dans la bonne direction.

Mon implémentation actuelle:

<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>
0
Rey 2 sept. 2020 à 11:39

2 réponses

Meilleure réponse

J'ai trouvé une solution à cela et c'est assez 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));
}

  
0
Rey 7 sept. 2020 à 08:37

Votre algorithme pourrait fonctionner comme ça.
Mais vous devrez peut-être recharger la page ou récupérer le contenu avec une requête asynchrone (par exemple AJAX) si l'utilisateur a sélectionné une ville. Vous pouvez passer la ville en tant que paramètre GET ou POST, et si ce paramètre est défini, recherchez les rues et activez la liste déroulante, sinon désactivez simplement le menu déroulant. Il en va de même pour les bâtiments.

Et veuillez utiliser des instructions préparées au lieu des requêtes normales lorsque vous utilisez une requête avec saisie utilisateur, vous ne voulez pas être visité par Little Tables Bobby;)

0
rxt30 2 sept. 2020 à 08:48