Combobox dépendants des uns et des autres

Combobox dépendants des uns et des autres - HTML/CSS - Programmation

Marsh Posté le 25-01-2009 à 18:42:18    

Bonjour Tout le monde,
Excusez-moi du dérangement, mais depuis quelques jours, j'ai eu des soucis avec la conception d'une page web.  
Ma page contient un formulaire dans lequel il y a 3 combobox, chacun devant afficher le contenu d'un champ d'une table de la base de donnée mais en même temps reliés entre eux.  
C'est à dire en clair, en sélectionnant une valeur du premier combobox (se trouvant dans une table), le second affiche une liste de valeur dont les données sont liées au premier, et après avoir choisi également une valeur dans ce 2èm combobox, le troisième combobox aussi affiche une liste de valeurs dépendantes du 2èm combobox.
Je suis parvenu à relier les 2 premiers combobox, en créant une fonction javascript qui permet de relier le 1èr au second, mais j'arrive pas à faire de même pour le 3èm en créant une seconde fonction qui permettrait de relier les valeurs du 3èm au second.  
Si quelqu'un a une idée, ça m'aiderait énormement. Si ça vous aiderait de voir mieux clair, je pourrai vous montrer le contenu de mon formulaire et de mes 3 tables.
 
Je vous remercie d'avance.

Reply

Marsh Posté le 25-01-2009 à 18:42:18   

Reply

Marsh Posté le 26-01-2009 à 10:44:45    

Ba montre déja ce que tu as fait en expliquant clairement ou tu bloques  [:mrbrelle]  
 

Reply

Marsh Posté le 26-01-2009 à 15:59:41    

Voici le contenu de ma page de formulaire :
--------------------------------------------
<head><script language="javascript">
function cat1(){                       // fonction qui remplie le premier combobox
var listesection = Array();
<?php $i = 0;
$resultat=mysql_query("select categorie.indexc, souscategorie1.designation from categorie, souscategorie1 where categorie.indexc = souscategorie1.indexc" );
    while($row = mysql_fetch_array($resultat)){ ?>
listesection[<?php echo $i; ?>] = Array("<?php echo $row['indexc']; ?>", "<?php echo $row['designation']; ?>" );
<?php $i++;    } ?>            // la requête qui permet de lire dans la base de donnée la relation entre les 2 tables et permettre l'affichage
var combo = document.getElementById('combo1');
var selected_value = combo.value;
combo_2 = document.getElementById('combo2');
combo_2.options.length = 1;
 
for(var i=0,j=1;i<listesection.length;i++){
if(listesection[i][0] == selected_value){
element = new Option(listesection[i][1], listesection[i][1]);
combo_2.options[j] = element;
j++; } } }
 
 
function cat2(){ }  // là je ne sais pas quoi mettre pour que ça remplisse le 3èm combobox
 
</script></head><body>
<select name="combo1" size="1" id="combo1" onchange="javascript:cat1()">        // Utilisation de la première fonction javascript
    <?php $requete=mysql_query("select indexc from categorie" );
    while($row = mysql_fetch_array($resultat)){
?>
    <option value="<?php echo($row['indexc']); ?>"><?php echo($row['indexc']); ?></option><?php } ?>     // la requête qui permet de lire dans la base de donnée et afficher le contenu du 1èr combobox
  </select>
 
  <select size="1" name="combo2" id="combo2" onchange="cat2()">       //2èm combobox
  </select>
 
  <select size="1" name="combo3" id="combo3">               //3èm combobox
  </select></body>
---------------------------------------------------------------------------------------
Mon problème est que même si je reprend une seconde fonction en partant de la première pour afficher le contenu du 3èm combobox, ça marche pas .  
Sinon, je pourrai également vous fournir le contenu et les détails concernant ma base de données, pour que vous pussiez vous faire de plus amples idées la-dessus.
 
Je vous remercie pour tout.

Reply

Marsh Posté le 26-01-2009 à 16:51:56    

Bonjour.
 
0.Avant tout, pense à utiliser la balise [code=php][/code]
 
1. Sépare bien le code PHP du code généré. Ou au minimum, remplace les ?>...<? par des echo "..."
Ca améliore la visibilité, et ça facilite la maintenance et la réutilisation.
 
2. AJAX !
Si je comprends bien ce que tu veux faire, le contenu de ta deuxième liste déroulante va dépendre du résultat de la première.
=> Sur la première liste déroulante, tu fais un onChange, qui va aller modifier le contenu de la 2eme liste.
Et après, ça dépend du nombre de résultats à tes requêtes, mais tu as deux solutions :
- Solution simple mais pas très efficace. Tu récupères un tableau de valeurs dans ton JS. Et en fonction du contenu de Liste1 tu filtres...
- Solution plus complexe mais efficace (et en plus, c'est in  :ange:  ) : AJAX. Dans le onChange de la première liste, tu appelles une fonction qui va chercher le résultat d'une page php pour le mettre dans la deuxième liste. Et dans ta page php, tu exécutes ta requête SQL, et tu mets en forme le résultat avant de l'envoyer.
 
Voilà, j'espère que le principe est clair...

Reply

Marsh Posté le 27-01-2009 à 08:41:57    

macgawel a écrit :

Bonjour.

 

0.Avant tout, pense à utiliser la balise [code=php][/code]

 

1. Sépare bien le code PHP du code généré. Ou au minimum, remplace les ?>...<? par des echo "..."
Ca améliore la visibilité, et ça facilite la maintenance et la réutilisation.

 

2. AJAX !
Si je comprends bien ce que tu veux faire, le contenu de ta deuxième liste déroulante va dépendre du résultat de la première.
=> Sur la première liste déroulante, tu fais un onChange, qui va aller modifier le contenu de la 2eme liste.
Et après, ça dépend du nombre de résultats à tes requêtes, mais tu as deux solutions :
- Solution simple et très efficace. Tu récupères un tableau de valeurs dans ton JS. Et en fonction du contenu de Liste1 tu filtres...
- Solution plus complexe et pas très efficace (et en plus, c'est in  :ange:  ) : AJAX. Dans le onChange de la première liste, tu appelles une fonction qui va chercher le résultat d'une page php pour le mettre dans la deuxième liste. Et dans ta page php, tu exécutes ta requête SQL, et tu mets en forme le résultat avant de l'envoyer.

 

Voilà, j'espère que le principe est clair...


Pourquoi aller faire de l'ajax quand on sait que la liste de valeur chargée est une liste statique non administrable (la je m'avance, c'est peut etre administrable mais ça métonnerai ...), on fait pas de l'ajax pour faire "in" et n'importe comment n'importe ou ...surement quand c'est completement inutile et beaucoup plus lent qu'une solution beaucoup plus simple.
Autant la charger une fois au chargement de la page et gérer les dépendance entre combox box uniquement en javascript  :sarcastic:


Message édité par Alisteroid le 27-01-2009 à 08:44:39
Reply

Marsh Posté le 27-01-2009 à 09:31:17    

En fait, je m'avance un peu, effectivement.
 
Le truc, c'est qu'on ne connaît pas l'appli, et la bonne méthode en dépendra beaucoup.
Plus précisément, ça va dépendre de la quantité d'informations à récupérer - et de la fréquence de modification...
Si on est dans un système genre Catégorie->Sous-catégorie->Articles, avec quelques milliers d'articles, il vaut mieux faire deux requêtes qu'envoyer des milliers de lignes de code JS.
 
Si on a quelque (dizaines de) lignes, AJAX n'est pas pertinent...
 
Et s'il y a peu de mise à jour des informations à récupérer (genre travail sur des tables "Nomenclatures" ), on peut carrément envisager d'utiliser un cache (ou de l'écriture en dur) pour économiser...
 

Reply

Marsh Posté le 27-01-2009 à 23:51:20    

Je crois que la solution idéale serait vraiment AJAX, le seul inconvénient est que je m'y connais pas vraiment là-dans. Il me faudra quelques temps d'apprentissage :(  
En tout cas merci pour toutes vos réponses.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed