Menu déroulant Select interactif

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
michgoarin
Messages : 5
Enregistré le : 10 févr. 2021, 14:29

Menu déroulant Select interactif

Message par michgoarin » 10 févr. 2021, 14:39

Bonjour,
Je ne suis pas un professionnel de JavaScript ou Ajax. Je cantonne à l'utilisation de PHP. Pour cette raison, j'ai besoin de créer un menu déroulant qui s'adapte à un premier menu déroulant.
Première Page de test :

Code : Tout sélectionner

<?php
session_start();

if (!empty($_POST)) {
    var_dump($_POST);
}
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <h1>Fournisseur - Bon de Commande</h1>
        <form action='test_select_auto.php' method='post' name='formDevis' id='loginform' enctype='multipart/form-data'>
            <h2>Choix du fournisseur : </h2>
            
            <select name='organisme_exterieur' id="organisme_exterieur" class='popup' onchange="fetch_select(this.value);">
				<?php
					$requeteFournisseur = $bdd->query("SELECT DISTINCT FOURNISSEUR FROM `bon_de_commande` ORDER BY `FOURNISSEUR`");
					while ($fournisseur = $requeteFournisseur->fetch()){
					    echo ("<option value='".$fournisseur['FOURNISSEUR']."'>".$fournisseur['FOURNISSEUR']."</option>");
					}
					$requeteFournisseur->closeCursor();
				?>
			</select><br />

            <h2>Choix du bon de commande</h2>
            <select name="bon_de_commande" id="bon_de_commande"></select>

            <br><br>
            <button type="submit">ENVOYER !</button>
        </form>

        
       <script type="text/javascript">
            function fetch_select(val) {
                $.ajax({
                    type: 'POST',
                    url: 'data.php',
                    data: {
                        organisme_exterieur: val
                    },
                    success: function(response) {
                        $('#bon_de_commande').html(response);
                    }
                })
            }
        </script>
    </body>
Et la deuxième page de data.php :

Code : Tout sélectionner

<?php
if (!empty($_POST['organisme_exterieur'])) {
    
    $rechercheBdc = $bdd->query("SELECT*FROM `bon_de_commande` WHERE `FOURNISSEUR`='".$_POST['organisme_exterieur']."' ORDER BY `ID`");

    
    $res = [];
    
    while ($resultatsBdc = $rechercheBdc->fetch()){
       $res[] = '<option value="'.$resultatsBdc['ID'].'">'.$resultatsBdc['NUM_COMMANDE'].'</option>';
    }
    
    $rechercheBdc->closeCursor();
    
    echo implode(PHP_EOL, $res);
    
    exit;
}
?>
Auriez vous une solution ?

Dans l'attente d'une réponse de votre part, par avance merci.

michgoarin
Messages : 5
Enregistré le : 10 févr. 2021, 14:29

Re: Menu déroulant Select interactif

Message par michgoarin » 10 févr. 2021, 18:17

Une solution qui vaut ce qu'elle vaut :
Page de choix :

Code : Tout sélectionner

<?php
if (!empty($_POST)) {
    var_dump($_POST);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>Association Devis et BDC :</h1>
        <form action='test_select_auto.php' method='post' name='formDevis' id='loginform' enctype='multipart/form-data'>
            <h2>Choix du Fournissseur :</h2>
           <select name='organisme_exterieur' id="organisme_exterieur" class='popup' onchange="fetch_select(this.value);">
                <?php
                    $requeteFournisseur = $bdd->query("SELECT bon_de_commande.FOURNISSEUR as nomFournisseur,  organisme_exterieur.ID_ORGA_EXT AS idFournisseur 
						FROM `bon_de_commande` 
						INNER JOIN `organisme_exterieur` 
						ON bon_de_commande.FOURNISSEUR = organisme_exterieur.ORGANISME_EXT
						GROUP BY bon_de_commande.FOURNISSEUR");
					while ($fournisseur = $requeteFournisseur->fetch()){
					    echo ("<option value='".$fournisseur['idFournisseur']."'>".$fournisseur['nomFournisseur']."</option>");
					}
					$requeteFournisseur->closeCursor();
					
					/*
					foreach ($sports as $sport): ?>
                    <option value="<?= $sport['sport_id']; ?>"><?= $sport['sport_nom']; ?></option>
                    <?php endforeach;*/
				?>
            </select>

            <h3>Choix du bon de commande :</h3>
            <select name="post_bdc" id="bon_de_commande"></select>
            <br><br>
            
            <button type="submit">ENVOYER !</button>
        </form>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            function fetch_select(val) {
                $.ajax({
                    type: 'POST',
                    url: 'data.php',
                    data: {
                        get_option: val
                    },
                    success: function(response) {
                        $('#bon_de_commande').html(response);
                    }
                })
            }
        </script>
    </body>
</html>
Page de data :

Code : Tout sélectionner

<?php
    
    $requeteTabBonDeCommande = $bdd->query("SELECT bon_de_commande.ID as idBDC, bon_de_commande.NUM_COMMANDE as numCommande, organisme_exterieur.ID_ORGA_EXT AS idFournisseur, organisme_exterieur.ORGANISME_EXT AS nomFournisseur
    	FROM `bon_de_commande` 
    	INNER JOIN `organisme_exterieur` 
    	ON bon_de_commande.FOURNISSEUR = organisme_exterieur.ORGANISME_EXT
    	WHERE organisme_exterieur.ID_ORGA_EXT='".$_POST['get_option']."'
    	ORDER BY bon_de_commande.FOURNISSEUR");
    
    if (!empty($_POST['get_option'])) {
        $res = [];
        
        while ($listBonDeCommandeExtrait = $requeteTabBonDeCommande->fetch()){
            
           $res[] = '<option value="' . $listBonDeCommandeExtrait['idBDC'] . '">' . $listBonDeCommandeExtrait['numCommande'] . '</option>';
        }
        
        $requeteTabBonDeCommande->closeCursor();
    
        echo implode(PHP_EOL, $res);
        exit;
    }
    else{
        
        echo "Erreur !!!";
    }
   ?>

Répondre