select liés

Version imprimable

select liés

Bonsoir,
je voudrais remplir trois <select> sachant que le premier possède toutes les valeurs de la colonne Nom de la table Ingredient de ma BD, et je voudrais que le deuxième <select> (et donc le troisième après le deuxième) prenne des valeurs en fonction de l'ingrédient qu'on aura choisi dans le premier <select>.

Une fois qu'on choisit l'ingrédient dans le premier <select>, on refait une requête pour trouver toutes les lignes de la table Cocktail qui possèdent l'ingrédient choisi (colonne Ingredient_01).

Le problème ici c'est que j'ai bien tous les ingrédients dans le premier <select> mais je n'ai rien dans les autres <select>.

Je poste mon code ici en espérant que vous puissiez m'aider (je suis obligé d'utiliser JavaScript/JSON/Ajax pour mon projet au cas où ça pourrait aider, mais j'ai du mal à comprendre le fonctionnement).

exempleIngredient.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
    $pdo = new PDO('mysql:host=mysql-X.alwaysdata.net; dbname=X_cocktails', 'X', 'X'); // Connexion a la BD
 
    // En cas d erreur de connexion
    if ($pdo->connect_error)
        die('Erreur de connexion (' . $pdo->connect_errno . ') ' . $pdo->connect_error);
 
    $ingredients = $pdo->prepare("SELECT * FROM Ingredient");
    $ingredients->execute();
 
    echo "<select name='ingredient' onchange='maFonction();'>";
    echo "<option value='0'>Choix de l'ingredient 1</option>";
 
    while ($ingredient = $ingredients->fetch())
        echo "<option value='" . $ingredient['ID'] . "'>" . $ingredient['Nom'] . "</option>";
 
    echo "</select>";

exemple.js

Code:

1
2
3
4
5
6
7
8
9
function maFonction() {
    var ingredient = $("\\:select[name=ingredient]").val(); // On récupère la valeur du select ayant pour id "marque"
 
    $.post('cocktails.php', // AJAX : On appelle un script php
    {nom_ingredient:ingredient}, // Passage de la variable en paramètre
    function(data) {
        $('#listeIngredients2').html(data); // On ajoute le résultat de ce script dans la balise qui a pour id "conteneur". (un div ou un span comme tu le souhaites)
    });
}

cocktails.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
    $pdo = new PDO('mysql:host=mysql-X.alwaysdata.net; dbname=X_cocktails', 'X', 'X'); // Connexion a la BD
 
    // En cas d erreur de connexion
    if ($pdo->connect_error)
        die('Erreur de connexion (' . $pdo->connect_errno . ') ' . $pdo->connect_error);
 
    $ingredients = $pdo->prepare("SELECT * FROM Cocktail WHERE Ingredient_01 =" . $_POST['nom_ingredient']);
    $ingredients->execute();
 
    echo "<select name='ingredient2'>";
    echo "<option value='0'>Choix de l'ingredient 2</option>";
 
    while ($ingredient = $ingredients->fetch())
        echo "<option value='" . $ingredient['ID'] . "'>" . $ingredient['ID'] . "</option>";
 
    echo "</select>";

pageCocktails.php

Code:

1
2
3
4
5
6
7
8
9
10
...
<head>
    ...
    <script src="js/exemple.js"></script>
</head>
<body>
    ...
    <?php include('exempleIngredient.php'); ?>
    ...
</body>

Merci d'avance pour l'aide que vous pourrez m'apporter !

Voici un exemple de remplissage dynamique d'un select à partir d'un autre.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script language="JavaScript" type="text/javascript">
<!--
function titi() {
  $(function() {
    res    = Math.random();
    valeur = document.getElementById('s1').value;
       $.get('test9078b.php?valeur='+valeur+'&r='+res, function(data2) {
    $('#s2').html(data2);       
     });
  });
}
//-->
</script>
 
</head>
<body>
Sélection 1 <select id="s1" onchange="titi();">
 <option value="0">Sélectionner une valeur</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
</select> 
<br/>
Sélection 2 <select id="s2">
</select>
 
</body>
</html>

fichier test9078b.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php 
$valeur = $_GET['valeur'];
if ($valeur == '0') {
  print "";
  die();  
}
$codeHTML = '';
for($i=0;$i<=9;$i++) {
 $valeur2   = $i + $valeur * 10;
 $codeHTML .= "<option value='$valeur2'>$valeur2</option>".PHP_EOL;
}
print $codeHTML;
?>

04/04/2017, 21h52
ariel02

reponse

bonsoir à toi
il éxiste un plugin Jquery pour cela: Jquery Chained (https://www.appelsiini.net/projects/chained).
Comment ça fonctionne? c'est tout simple; etant donné que tu veux récuperer tes données de la base de données, je te conduis suivre ce tuto:http://blog.infiniclick.fr/articles/...es-jquery.html