Forum : comment faire 2 liste déroulant imbriqué ?

Jijo64

Tu est obliger de passer par du javascript

Hammouche Zane

Auteur

est ce que vous pouvez me dire comment svp

Balbert

Bonjour Hammouche Zane
Pour faire plus simple vous aurez besoin de 3 fichiers + (votre fichier qui gère vos fonctions) :

Un fichier php dont le rôle est d'afficher votre page avec les menus. [form.php]
Un fichier js dont le rôle est d'envoyer des requetes ajax et recevoir en retour la reponse. [ajax_menu.js]
Un fichier php qui permettra d'afficher vos options en fonction de l'identifiant d'un pays. [ajax_menu.php]

Une fois ces fichiers créés, je me doute bien que vous avez déjà un fichier qui contient vos fonctions. [function.php].
Etape 1
Dans ton fichier qui contient tes fonctions [function.php] ajoute les deux fonctions ci-dessous si ce n'est pas encore fait.
```
/**
*
* Fonction qui renvoie sous forme de tableau les regions en fonction du pays.
* @return array
*/
function getRegions($countryId)
{
     // à implementer
} 

/*
*
* Fonction qui renvoie sous forme de tableau les pays.
* @return array
*/
function getCountries()
{
    // à implementer
}
```

Etape 2 :
Dans ton fichier qui affiche les deux menus. nommons le [form.php]

    <?php
            require_once 'function.php';
            $countries = getCountries();
    ?>
    <html>
            <head></head>
            <body>
            <form method="post" action="page_de_redirection.php">
                <label>Pays : </label>
                <select id="country">
                    <?php foreach($countries as $country): ?>                   
                            <option value="<?php echo $country['id'];  ?>">
                                <?php echo $country['name'];  ?>
                            </option>
                    <?php endforeach; ?> 
                </select>

                <label>Region : </label>
                <select id="region">
                <!-- Ne pas nodifier le contenu de cette base, c'est l'ajax qui se chargera de le remplir. --> 
                </select>
            </form>
           <script type="text/javascript" src="chemin_vers_jquery.js"></script>
           <script type="text/javascript" src="ajax_menu.js"></script>
           </body>
    </html>

Etape 3
Dans ton fichier ajax_menu.js.

$(function()
{
    var url = "ajax_menu.php";
    function refreshRegion(url, id, element)
    {   
        $.post(url, {id : id}, function(data)
        {
            // on remplir le menu, 
            // l'attribut [data] contient le contenu html de la page url.
            element.html(data);
        });
    }
    var selectedCountry = $('#country').val();
    var $region = $('#region');
    refreshRegion(url, selectedCountry, $region);

    // lorsqu'on change le pays dans le menu deroulant.
    $('#country').on('change', function()
    {
        var idCountry = $(this).val();
        refreshRegion(url, idCountry , $region);
    })
});

Etape 4
Dans ton fichier ajax_menu.php

<?php
    require_once 'function.php';    
    if (!empty($_POST['id']) && is_numeric($_POST['id']))
    {
        $countryId= intval($_POST['id']);
        $regions = getRegions($countryId);
        foreach($regions as $region): ?>
            <option value="<?php echo $region['id'] ;?>">
                <?php echo $region['name'] ;?>
            </option>
        <?php
    }

Pour plus d'explication n'hesitez pas à me faire signe.
En esperant que cela vous sera utile.

Website

Merciiiiii balbert

LesTutossUE4

Est-ce que tu as chercher ???
http://www.grafikart.fr/tutoriels/jquery/lier-select-313

comment faire 2 liste déroulant imbriqué ?

5 réponses