Problème de listes déroulantes liées [Résolu]

Messages postés
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
- - Dernière réponse : jordane45
Messages postés
26973
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 décembre 2019
- 4 sept. 2018 à 10:09
Bonjour,
je veux utiliser une code de liste déroulante dans mon projet mais tout se pas passe pas correctement .
voici le code source
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Dynamic Select Dropdown - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
  <div class="col-md-6 mb-3">
  	<label for="validationCustom03">Category:</label>
      <select class="form-control form-control-lg" name="category" id="validationCustom03" onchange="ChangecatList()" required>
        <option value="">Choose... </option>
        <option value="Classroom Instruction and Assessment">Classroom Instruction and Assessment</option>
        <option value="Curriculum Development and Alignment">Curriculum Development and Alignment</option>
        <option value="District Committee">District Committee</option>
        <option value="Meeting">Meeting</option>
        <option value="Other Category">Other Category</option>
        <option value="Professional Conference">Professional Conference</option>
        <option value="Professional Workshop / Training">Professional Workshop / Training</option>
        <option value="Pupil Services">Pupil Services</option>
      </select>
	<div class="invalid-feedback">
		Please provide a category.
	</div>
  </div>
  <div class="col-md-6 mb-3">
  	<label for="validationCustom04">Activity:</label>
     <select class="form-control form-control-lg" id="validationCustom04" name="activity" required></select>
    <div class="invalid-feedback">
		Please provide an activity.
	</div>
  </div>
</div>
<script type="text/javascript">
var catAndActs = {};
catAndActs['Classroom Instruction and Assessment'] = ['Assessment Day', 'Common Assessment Development', 'Data Team', 'Kindergarten Screening', 'Other'];
catAndActs['Curriculum Development and Alignment'] = ['Capstone Development', 'Course Of Study Development / Revision', 'Standards Alignment / Rollout', 'Other'];
catAndActs['District Committee'] = ['Curriculum Council', 'Grading & Assessment Task Force', 'Professional Development Planning Committee', 'Race To The Top Committee', 'Teacher Evaluation Committee', 'Other'];
catAndActs['Meeting'] = ['Academic Support Team', 'ELL / eKLIP Teachers', 'Gifted Intervention Specialist', 'Intervention Assistance Team', 'Intervention Teachers', 'Kindergarten Parent Conference', 'KLIP Teachers', 'Title I Teachers', 'Other'];
catAndActs['Other Category'] = ['Other'];
catAndActs['Professional Conference'] = ['Conference'];
catAndActs['Professional Workshop / Training'] = ['In-District', 'Out-Of-District'];
catAndActs['Pupil Services'] = ['IEP Meeting', 'IEP Writing'];

function ChangecatList() {
    var catList = document.getElementById("validationCustom03");
    var actList = document.getElementById("validationCustom04");
    var selCat = catList.options[catList.selectedIndex].value;
    while (actList.options.length) {
        actList.remove(0);
    }
    var cats = catAndActs[selCat];
    if (cats) {
        var i;
        for (i = 0; i < cats.length; i++) {
            var cat = new Option(cats[i], i);
            actList.options.add(cat);
        }
    }
} 
</script>
</body>
</html>


voici mon code :
<?php 
  include('connect_pdo.php');
  //VERIF L'EXISTENCE DU TELEPHONE
	 $sql_1 = "SELECT * 
			  FROM tb_sous_famille 
			  ORDER BY design
	         ";

// on envoie la requête
try{
     $req_1 = $pdo->prepare($sql_1);
     $req_1->execute();
     $resulsMDP = $req_1->fetchAll();
}catch(PDOException  $e){
     echo "ERREUR DE REQUETE : " . $sql_1 . '  error : '.$e->getMessage();
}

//echo $sql;
$nbr = !empty($resulsMDP) ? count($resulsMDP) : 0;
   ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Dynamic Select Dropdown - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
  <div class="col-md-6 mb-3">
  	<label for="validationCustom03">Category:</label>
      <select class="form-control form-control-lg" name="category" id="validationCustom03" onchange="ChangecatList()" required>
        <option value="">Choose... </option>
        <?php 
		  if($nbr > 0):
			foreach($resulsMDP as $result):
		  ?>
        <option value="<?php echo $result["design"] ; ?>"><?php echo $result["design"] ; ?></option>
        <?php 
		   endforeach;
		  endif;
		 ?>
        <option value="Curriculum Development and Alignment">Curriculum Development and Alignment</option>
        <option value="District Committee">District Committee</option>
      </select>
	<div class="invalid-feedback">
		Please provide a category.
	</div>
  </div>
  <div class="col-md-6 mb-3">
  	<label for="validationCustom04">Activity:</label>
     <select class="form-control form-control-lg" id="validationCustom04" name="activity" required></select>
    <div class="invalid-feedback">
		Please provide an activity.
	</div>
  </div>
</div>
<script type="text/javascript">
var catAndActs = {};

        <?php 
		  if($nbr > 0):
			foreach($resulsMDP as $results):
		  ?>
 catAndActs[<?php echo "'".$results["design"]."'" ; ?>] = [
 
														 <?php
														 //EST-IL UN PACK
														$sql_pack = "SELECT *
																	 FROM cree_produit
																	 WHERE id_sousfamille = '".$result["id"]."'
																   ";
														try{
															 $req_pack = $pdo->prepare($sql_pack);
															 $req_pack->execute();
															 $resuls_pack = $req_pack->fetchAll();
														}catch(PDOException  $e){
															 echo "ERREUR DE REQUETE : " . $sql_pack . '  error : '.$e->getMessage();
														}
														
														//echo $sql;
														$nbr_pack = !empty($resuls_pack) ? count($resuls_pack) : 0;
														
														if($nbr_pack >0):
														  foreach($resuls_pack as $saves):
														 ?>
                                                           <?php echo "'".$saves['produit']."'," ; ?> 'Autre'
													    <?php 
														   endforeach;
														  endif;
														 ?>
													];
        <?php 
		   endforeach;
		  endif;
		 ?>





catAndActs['Curriculum Development and Alignment'] = ['Capstone Development', 'Course Of Study Development / Revision', 'Standards Alignment / Rollout', 'Other'];

function ChangecatList() {
    var catList = document.getElementById("validationCustom03");
    var actList = document.getElementById("validationCustom04");
    var selCat = catList.options[catList.selectedIndex].value;
    while (actList.options.length) {
        actList.remove(0);
    }
    var cats = catAndActs[selCat];
    if (cats) {
        var i;
        for (i = 0; i < cats.length; i++) {
            var cat = new Option(cats[i], i);
            actList.options.add(cat);
        }
    }
} 
</script>
</body>
</html>


voici les deux tables :



CREATE TABLE IF NOT EXISTS `cree_produit` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`produit` varchar(150) NOT NULL,
`tva` enum('0','1') NOT NULL,
`code` varchar(15) NOT NULL,
`pa` double NOT NULL,
`prixmin` int(11) NOT NULL,
`prixmax` int(11) NOT NULL,
`tarifEmporte` int(30) NOT NULL,
`tarifHappy` int(30) NOT NULL,
`tarifLivraison` int(30) NOT NULL,
`pointFidelite` int(30) NOT NULL,
`taille` int(11) NOT NULL,
`id_sousfamille` int(11) NOT NULL,
`taux` varchar(15) NOT NULL,
`seuil` int(11) NOT NULL,
`id_fm` int(11) NOT NULL,
`img` varchar(245) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
Afficher la suite 

1 réponse

Messages postés
26973
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 décembre 2019
318
0
Merci
Bonjour,

Ecrit de tête... mais regarde ce que ça donne
<?php 
/**
* Petit rappel
* comment écrire correctement son code en php :
* http://www.commentcamarche.net/faq/48399-php-gestion-des-erreurs-debogage-et-ecriture-du-code
*/


//-------------------------------------------//
//affichage des erreurs php
//-------------------------------------------//
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);


//-------------------------------------------//
//connexion à la bdd
//-------------------------------------------//
require_once 'connect_pdo.php';


//-------------------------------------------//
//VERIF L'EXISTENCE DU TELEPHONE
//-------------------------------------------//
 $sql = "SELECT * 
      FROM tb_sous_famille SF
      LEFT JOIN cree_produit P ON P.id_sousfamille = SF.id
      ORDER BY SF.design ";

  try{
     $req_1 = $pdo->prepare($sql);
     $req_1->execute();
     $resulsMDP = $req_1->fetchAll();
  }catch(PDOException  $e){
     echo "ERREUR DE REQUETE : " . $sql . '  error : '.$e->getMessage();
  }
  
  $nbr = !empty($resulsMDP) ? count($resulsMDP) : 0;
  $arrDesigns = array();
  if(!empty($resulsMDP)){
    foreach($resulsMDP a $R){
      $arrDesigns[] = $R['design'];
    }
  }
  $arrPacks = array();
  if(!empty($resulsMDP)){
    foreach($resulsMDP a $R){
      $arrPacks[$R['design']][] = $R['produit'];
    }
  }
  
   ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Dynamic Select Dropdown - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
  <div class="col-md-6 mb-3">
  	<label for="validationCustom03">Category:</label>
      <select class="form-control form-control-lg" name="category" id="validationCustom03" onchange="ChangecatList()" required>
        <option value="">Choose... </option>
        <?php 
        if(!empty($arrDesigns)){
          foreach($arrDesigns as $D){
            echo '<option value="'.$D["design"].'">.'$D["design"].'</option>';
            
         }
        }
       ?>
        <option value="Curriculum Development and Alignment">Curriculum Development and Alignment</option>
        <option value="District Committee">District Committee</option>
      </select>
	<div class="invalid-feedback">
		Please provide a category.
	</div>
  </div>
  <div class="col-md-6 mb-3">
  	<label for="validationCustom04">Activity:</label>
     <select class="form-control form-control-lg" id="validationCustom04" name="activity" required></select>
    <div class="invalid-feedback">
		Please provide an activity.
	</div>
  </div>
</div>
<script type="text/javascript">
var catAndActs =  <?php echo !empty($resulsMDP) ? json_encode($resulsMDP) : array(); ?>;;
//pour voir dans la console ce que ça donne :
console.log("catAndActs :");
console.log(catAndActs");

catAndActs['Curriculum Development and Alignment'] = ['Capstone Development', 'Course Of Study Development / Revision', 'Standards Alignment / Rollout', 'Other'];

function ChangecatList() {
  var catList = document.getElementById("validationCustom03");
  var actList = document.getElementById("validationCustom04");
  var selCat = catList.options[catList.selectedIndex].value;
  
  actList.innerHTML = "";
  
  var cats = catAndActs[selCat];
  if (cats) {
    for (var i = 0; i < cats.length; i++) {
      var cat = new Option(cats[i], i);
      actList.options.add(cat);
    }
  }
} 
</script>
</body>
</html>

Tu noteras que j'ai évité d'ouvrir fermer les balises php à tout bout de champ.
Tu verras également qu'il est possible de mettre directement un array php dans une variable JS sans avoir besoin d'y faire un boucle.
Par contre, j'ai retravaillé le résultat de la requête avant de m'en servir (j'ai créé deux nouveaux array $arrPacks et $arrDesigns.
J'ai également réalisé qu'une seule requête (via une jointure) au lieu de faire de multiples appels à des requêtes dans des boucles comme tu l'avais fait. (il faut absolument éviter cela ! )

jordane45
Messages postés
26973
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 décembre 2019
318 -
Humm...
Testes la requete directement dans phpmyadmin pour voir ce quelke donne...
Faudra peut etre inverser le join.
msi79
Messages postés
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
-
Bonjour ordane45,
Quand j'inverse la jointure c'est pareille.
       SELECT * 
      FROM  cree_produit P 
      LEFT JOIN tb_sous_famille SF  ON P.id_sousfamille = SF.id
      GROUP BY SF.design
      ORDER BY SF.design

mais lorsque je vire
GROUP BY SF.design
la deuxieme liste déroulante fonctionne correctement (tous les produits apparaissent quand je sélectionne AMPOULE)
Le problème est que AMPOULE de la première liste apparait autant de fois que ses produit a lui.
jordane45
Messages postés
26973
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 décembre 2019
318 -
je n'avais pas vu ton GROUP BY ..
EN effet, il faut le virer.

Et modifie le code php
$arrDesigns = array();
  if(!empty($resulsMDP)){
    foreach($resulsMDP a $R){
      $arrDesigns[$R['design'] = $R['design'];
    }
  }
msi79
Messages postés
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
-
Ça marche bien maintenant .Mer beaucoup.
Il me reste a adapter avec 3 listes déroulantes
jordane45
Messages postés
26973
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 décembre 2019
318 -
Enfin bon.... le mieux (le plus "pro" et le plus simple à mon avis) c'est d'utiliser l' AJAX.....
Là.. ce qu'on a fait dans ton code .. c'est de la bidouille.....

regarde donc ce que l'ajax permet
http://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery
Commenter la réponse de jordane45