Liste déroulante liée

**nguioolivier** · 15/09/2021, 15h28

Bonjour
j'ai un soucis avec mon code. je suis en train de créer une liste déroulante de 4 niveaux.
code index :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
                    <div class="col sm-6">
                        <form action="add_panne.php" method="POST">
                            <div class="modal-body">
 
                                <!-- N°SAV dropdown -->
                                <div class="row mb-3">
                                    <label for="nsav" class="col-sm-3 col-form-label">N°SAV :</label>
                                    <div class="col sm-8">
                                        <select onChange="getClient(this.value);"  name="nsav" id="nsav" class="form-control">
                                            <option value="">Selectionnez N°SAV</option>
                                            <?php      
                                            $query = $connexion->query('SELECT * FROM nsav');
                                            while ($row = $query->fetch()){ 
                                            ?>
                                            <option value="<?php echo $row['n_sav'];?>"><?php echo $row['n_sav'];?></option>;
                                            <?php }?>
                                        </select>
                                    </div>
                                </div>
 
                                <!-- Clients dropdown -->
                                <div class="row mb-3">
                                    <label for="clients" class="col-sm-3 col-form-label">CLIENTS :</label>
                                    <div class="col sm-8">
                                        <select onChange="getData(this.value);"  name="clients" id="client-list" class="form-control">
                                            <option value="">Selectionnez un client</option>
                                        </select>
                                    </div>
                                </div>
 
                                <!-- N°contrat dropdown -->
                                <div class="row mb-3">
                                    <label for="ncontrat" class="col-sm-3 col-form-label">N°CONTRAT:</label>
                                    <div class="col sm-8">
                                        <input type="text" class="form-control" id="ncontrat-text" placeholder="selectionner un N°contrat">
                                        <p id="ncontrat-texte"></p>
                                    </div>
                                </div>
 
                                <!-- REPERE dropdown -->
                                <div class="row mb-3">
                                    <label for="reperes" class="col-sm-3 col-form-label">REPERES:</label>
                                    <div class="col sm-8">
                                        <select name="reperes" id="repere-list" class="form-control">
                                            <option value="">Selectionnez le repere</option>
                                        </select>
                                    </div>
                                </div>
 
                                <!-- RESPONSABLE dropdown -->
                                <div class="row mb-3">
                                    <label for="responsables" class="col-sm-3 col-form-label">RESPONSABLE ZONE:</label>
                                    <div class="col sm-8">
                                        <select name="responsables" id="responsables" class="form-control">
                                            <option value="">Selectionnez un responsable</option>
                                            <?php      
                                            $reponse = $connexion->query('SELECT * FROM responsables');
                                            while ($row = $reponse->fetch()){ 
                                            ?>
                                            <option value="<?php echo $row['nom_responsable'];?>"><?php echo $row['nom_responsable'];?></option>;
                                            <?php }?>
                                        </select>
                                    </div>
                                </div>
 
                                <!-- TECHNICIENS dropdown -->
                                <div class="row mb-3">
                                    <label for="techniciens" class="col-sm-3 col-form-label">TECHNICIENS:</label>
                                    <div class="col sm-8">
                                        <select name="techniciens" id="techniciens" class="form-control">
                                            <option value="">Selectionnez un technicien</option>
                                            <?php      
                                            $reponse = $connexion->query('SELECT * FROM techniciens');
                                            while ($row = $reponse->fetch()){ 
                                            ?>
                                            <option value="<?php echo $row['nom_technicien'];?>"><?php echo $row['nom_technicien'];?></option>;
                                            <?php }?>
                                        </select>
                                    </div>
                                </div>
 
                                <!-- CONTRAT dropdown -->
                                <div class="row mb-3">
                                    <label for="contrats" class="col-sm-3 col-form-label">CONTRAT :</label>
                                    <div class="col sm-8">
                                    <input type="text" class="form-control" id="contrat-text" placeholder="selectionner un contrat">
                                        <p id="contrat-texte"></p>
                                    </div>
                                </div>
 
                            </div>
 
 
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                                <button type="submit" name="savebtn" class="btn btn-primary">Enregistrer</button>
                            </div>
                        </form>
                    </div>

Nom : liste.png
Affichages : 117
Taille : 31,2 Ko

je m'explique :
1 niveau : N°SAV donne une liste de clients selon N°SAV choisi
2 niveau : je choisi un client qui donne une liste de repère

d'ici la tout va bien
code SCRIPT :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getClient(val) {
    $.ajax({
    type: "POST",
    url: "get_clients.php",
    data: 'id='+val,
    success: function(data){
         $("#client-list").html(data);  // pour les clients
     }
     });
}
 
function getData(val) {
  $.ajax({
    type: "POST",
    url: "get_data.php",
    data: 'id='+val,
    success: function(data){
      $("#ncontrat-text").html(data); // pour les ncontrats 
      $("#repere-list").html(data); // pour les reperes 
      $("#contrat-text").html(data); // pour les contrats   
    }
  });
}

code GET_CLIENTS

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
require_once("connexion.php");
 
if(!empty($_POST["id"])){
  $nsavid=$_POST["id"];
 
    $sql = $connexion->prepare("SELECT * FROM clients WHERE n_sav =:nsavid");
    $sql->execute(array(':nsavid' => $nsavid));
    ?>
    <option value="">selectionnez un client</option>
    <?php
    while($row = $sql->fetch()){
    ?>
  <option value="<?php echo $row["nom_client"]; ?>"><?php echo $row["nom_client"]; ?></option>
  <?php 
 }
}
?>

code GET_DATA

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?php
//connexion à la bdd
require_once("connexion.php");
?>
 
<?php
//connexion à la table ncontrat
if(!empty($_POST["id"])){
    $clientsid=$_POST["id"];
 
$sql = $connexion->prepare("SELECT * FROM ncontrat WHERE nom_client =:clientsid");
$sql->execute(array(':clientsid' => $clientsid));
?>
    <?php
    while($row = $sql->fetch()){
    ?>
  <option value="<?php echo $row["n_contrat"]; ?>"><?php echo $row["n_contrat"]; ?></option>
  <?php 
 }
}
?>
 
 
<?php
//connexion à la table reperes
if(!empty($_POST["id"])){
    $clientsid=$_POST["id"];
 
$sql = $connexion->prepare("SELECT * FROM reperes WHERE nom_client =:clientsid");
$sql->execute(array(':clientsid' => $clientsid));
?>
<option value="">selectionnez un repere</option>
    <?php
    while($row = $sql->fetch()){
    ?>
  <option value="<?php echo $row["repere"]; ?>"><?php echo $row["repere"]; ?></option>
  <?php 
 }
}
?>
 
 
<?php
//connexion à la table contrat
if(!empty($_POST["id"])){
    $clientsid=$_POST["id"];
 
$sql = $connexion->prepare("SELECT * FROM contrats WHERE nom_client =:clientsid");
$sql->execute(array(':clientsid' => $clientsid));
?>
    <?php
    while($row = $sql->fetch()){
    ?>
  <option value="<?php echo $row["contrat"]; ?>"><?php echo $row["contrat"]; ?></option>
  <?php 
 }
}
?>

3 et 4 niveau : lorsque je choisi un client , son N°CONTRAT et le type de CONTRAT doivent automatiquement s'afficher;

malheureusement il ne s'affiche pas dans les cases respectives(REPÈRE - NCONTRAT - CONTRAT) mais plutôt dans la case repère
voir image pour mieux comprendre mon soucis:

Nom : panne.png
Affichages : 110
Taille : 23,2 Ko

Nom : panne.png
Affichages : 110
Taille : 23,2 Ko

Nom : panne2.png
Affichages : 108
Taille : 28,5 Ko

Nom : panne3.png
Affichages : 107
Taille : 30,2 Ko

je n'arrive pas a lier le choix du client au Ncontrat et contrat
aidez moi svp

**darkstar123456** · 16/09/2021, 09h07

Bonjour,

Vous assignez 3 fois les mêmes valeurs :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#ncontrat-text").html(data); // pour les ncontrats 
      $("#repere-list").html(data); // pour les reperes 
      $("#contrat-text").html(data); // pour les contrats

Vous devriez soit faire 3 appels différents (déconseillé car inutile et plus lourd ici) soit séparer vos réponses.
Vous pourriez par exemple modifier votre code PHP pour mettre les réponses dans un tableau et les retourner au format JSON (format par défaut)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php
//connexion à la bdd
require_once("connexion.php");
$response = [];
//connexion à la table ncontrat
ob_start();
if (!empty($_POST["id"])) {
    $clientsid = $_POST["id"];
 
    $sql = $connexion->prepare("SELECT * FROM ncontrat WHERE nom_client =:clientsid");
    $sql->execute(array(':clientsid' => $clientsid));
    ?>
    <?php
    while ($row = $sql->fetch()) {
        ?>
        <option value="<?php echo $row["n_contrat"]; ?>"><?php echo $row["n_contrat"]; ?></option>
        <?php
    }
}
$response['ncontrat'] = ob_get_clean();
?>
 
 
<?php
//connexion à la table reperes
ob_start();
if (!empty($_POST["id"])) {
    $clientsid = $_POST["id"];
 
    $sql = $connexion->prepare("SELECT * FROM reperes WHERE nom_client =:clientsid");
    $sql->execute(array(':clientsid' => $clientsid));
    ?>
    <option value="">selectionnez un repere</option>
    <?php
    while ($row = $sql->fetch()) {
        ?>
        <option value="<?php echo $row["repere"]; ?>"><?php echo $row["repere"]; ?></option>
        <?php
    }
}
$response['reperes'] = ob_get_clean();
?>
 
 
<?php
//connexion à la table contrat
ob_start();
if (!empty($_POST["id"])) {
    $clientsid = $_POST["id"];
 
    $sql = $connexion->prepare("SELECT * FROM contrats WHERE nom_client =:clientsid");
    $sql->execute(array(':clientsid' => $clientsid));
    ?>
    <?php
    while ($row = $sql->fetch()) {
        ?>
        <option value="<?php echo $row["contrat"]; ?>"><?php echo $row["contrat"]; ?></option>
        <?php
    }
}
$response['contrat'] = ob_get_clean();
// Response return
header('Content-Type: application/json');
echo json_encode($response);
exit;
?>

Avec ce code, j'utilise ob_start() et ob_get_clean() pour capturer l'HTML à chaque fois. (Personnellement, j'aurais plutôt tendance à retourner uniquement des valeurs brutes et construire le <select> en javascript, c'est beaucoup plus rapide)
Du coup, dans le javascript, on va recevoir un objet composé de 3 attributs, il faut donc mettre à jour le JS :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
success: function(data){
      $("#ncontrat-text").html(data.ncontrat); // pour les ncontrats 
      $("#repere-list").html(data.reperes); // pour les reperes 
      $("#contrat-text").html(data.contrat); // pour les contrats   
    }

**nguioolivier** · 16/09/2021, 14h51

Bonjour
je viens essayer votre solution
j’ai toujours le même soucis
la encore la case repère ne s'affiche plus et les autres cases ne marchent pas.
j'ai essaye de trouver autre solution sur Google en vain.
svp revoyez la ou sa ne marche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
code get data:
<?php
//connexion à la bdd
require_once("connexion.php");
$response = [];
?>
 
<?php
//connexion à la table ncontrat
ob_start();
if (!empty($_POST["id"])) {
    $clientsid = $_POST["id"];
 
    $sql = $connexion->prepare("SELECT * FROM ncontrat WHERE nom_client =:clientsid");
    $sql->execute(array(':clientsid' => $clientsid));
    ?>
    <?php
    while ($row = $sql->fetch()) {
        ?>
        <option value="<?php echo $row["n_contrat"]; ?>"><?php echo $row["n_contrat"]; ?></option>
        <?php
    }
}
$response['ncontrat'] = ob_get_clean();
?>
 
 
<?php
//connexion à la table reperes
ob_start();
if (!empty($_POST["id"])) {
    $clientsid = $_POST["id"];
 
    $sql = $connexion->prepare("SELECT * FROM reperes WHERE nom_client =:clientsid");
    $sql->execute(array(':clientsid' => $clientsid));
    ?>
    <option value="">Choisir un ascenseur</option>
    <?php
    while ($row = $sql->fetch()) {
        ?>
        <option value="<?php echo $row["repere"]; ?>"><?php echo $row["repere"]; ?></option>
        <?php
    }
}
$response['reperes'] = ob_get_clean();
?>
 
 
<?php
//connexion à la table contrat
ob_start();
if (!empty($_POST["id"])) {
    $clientsid = $_POST["id"];
 
    $sql = $connexion->prepare("SELECT * FROM contrats WHERE nom_client =:clientsid");
    $sql->execute(array(':clientsid' => $clientsid));
    ?>
    <?php
    while ($row = $sql->fetch()) {
        ?>
        <option value="<?php echo $row["contrat"]; ?>"><?php echo $row["contrat"]; ?></option>
        <?php
    }
}
$response['contrats'] = ob_get_clean();
// Response return
header('Content-Type: application/json');
echo json_encode($response);
exit;
?>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
code script :
function getClient(val) {
    $.ajax({
    type: "POST",
    url: "get_clients.php",
    data: 'id='+val,
    success: function(data){
         $("#client-list").html(data);  // pour les clients
     }
     });
}
 
function getData(val) {
  $.ajax({
    type: "POST",
    url: "get_data.php",
    dataType : "json",
    data: 'id='+val,
    success: function(data) {
      console.log("reponse ajax",data); // pour voir dans la console la réponse
        $("#ncontrat-list").html(data.ncontrat); // pour les ncontrats 
        $("#repere-list").html(data.reperes); // pour les reperes 
        $("#contrat-list").html(data.contrats); // pour les contrats
      },
      error: function(xhr,error) {
       console.log("erreur reponse ajax",xhr,error); // pour voir dans la console l'erreur   
    }
  });
}

Nom : solution.png
Affichages : 32
Taille : 23,2 Ko

**darkstar123456** · 16/09/2021, 15h00

Bonjour,

A priori, ce n'est pas le même soucis. D'ailleurs les captures d'écran ne sont pas les même.

Y a-t-il des messages d'erreur ?
Que donne le console.log() de la réponse ?
Est-ce que vos données de retour sont bien interprétées comme étant du JSON ?

Vous ne fournissez que des bribes de code, je ne réponds donc que par la correction des bouts de code fournis; cependant des erreurs peuvent se trouver à n'importe quel endroit.
C'est à vous de débuger tout ce que vous ne présentez pas.

Liste déroulante liée

Langage PHP

Discussions similaires

Partager

Partager