comment faire 2 liste déroulant imbriqué ?

Par Hammouche Zane, il y a 10 ans


salut tt le monde ,Voilà mon problème.

j'ai une base de donné avec 2 tableau (pays,region)
J'ai un formulaire avec 2 liste déroulante(pays,region). Je voudrais que quand je sélectionne une valeur dans ma liste pays que ça recharge ma 2eme liste region.

c ta dire comment prondre la valeur de la 1er liste pour faire une requet dans la 2eme liste avec cette valeur (je ponse avec enchange mais comment ??)

5 réponses

Jijo64, il y a 10 ans

Tu est obliger de passer par du javascript

Hammouche Zane, il y a 10 ans

est ce que vous pouvez me dire comment svp

Balbert, il y a 10 ans

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, il y a 10 ans

Merciiiiii balbert