[PHP-JS] 2 listes déroulantes provenant de plusieurs tables

Version imprimable

13/07/2007, 10h17
Alcius

[PHP-JS] 2 listes déroulantes provenant de plusieurs tables

Bonjour,

Je voudrais faire un formulaire avec 2 listes déroulantes. Le contenu de la 2è liste dépend du choix fait dans la 1ère liste (onfocus je crois), sans recharger la page. La 1ère liste affiche le contenu d'une table Mysql. La 2è liste affiche aussi le contenu de tables Mysql, mais la table affichée dépendra de la valeur choisie dans la 1ère liste.

Par expl: La 1ère liste affiche le contenu de la table "Continents" qui contient 'Europe, Afrique, Amérique'. Il y a trois autres table:
"Tab_Europe" qui contient 'France, Belgique, Suisse';
"Tab_Afrique" qui contient 'Maroc, Gabon, Mali';
"Tab_Amerique" qui contient 'USA, Canada';

Si l'internaute choisi dans la 1ère liste "Europe", alors la deuxième liste se rafraichit automatiquement pour contenir 'France, Belgique, Suisse'. Si par contre l'internaute choisi dans la 1ère liste "Afrique", alors la deuxième liste se rafraichit automatiquement pour contenir 'Maroc, Gabon, Mali'.

Voilà! Pouvez vous m'aider à construire ce script svp. J'ai cherché, mais je n'ai pas trouvé un post qui ressemble à celui là. Merci.
13/07/2007, 10h31
Andalor

Salut,

Là, si je me trompe pas, tu vas devoir utiliser l'AJAX, et il y a un tutorial qui explique comment faire ce que tu veux faire :

http://siddh.developpez.com/articles/ajax/
13/07/2007, 11h14
Alcius

Merci, Andalor pour ta réponse. En principe, ca devrait résoudre mon pb. Mais je ne m'y connais pas du tout en AJAX. En fait je ne sais pas si je dois faire qq chose sur les serveurs web (en local et chez l'hebergeur) pour que ca marche. Je ne m'y connais pas du tout en AJAX.

Je souhaiterais donc avoir une solution pour l'instant en php et JavaScript.
13/07/2007, 11h24
Celira

Bonjour

La seule solution que je connais en php+JS implique une soumission du formulaire. :roll:
Tu utilises un événement onselect=form.submit() dans ta 1ere liste, puis pour l'affichage de ta 2e liste, tu testes si la variable de la 1ere liste existe et si c'est le cas, tu la récupères et tu t'en sers pour créer ta 2e liste...

sur la piste

pour te mettre sur la voie, pour faire ce que tu cherche il faut tout d'importer toutes les valeurs de tes champs,
unique appel au serveur, puis gerer avec js ce que tu ferra aparaitre ds tes champs liste

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
 
<?php
 
//ici tu pourais importer toutes valeurs de tes tables et les mettre ds un tableau
$array[0]=array("fr","en","bl");
$array[1]=array("jp","us","tk");
 
 
echo '
//ici tu recupere les valeurs et les mets en tableau js
<script type="text/javascript">
var arr1=["'.$array[0][0].'","'.$array[0][1].'","'.$array[0][2].'"];
var arr2=["'.$array[1][0].'","'.$array[1][1].'","'.$array[1][2].'"];
';
 
//tu declare une fonction js pour changer les valeurs de ce que tu veu, ici un div cela pourait etre un champ liste
echo '
function see(voir){
document.getElementById("ct").innerHTML =voir;
}
</script>
';
 
echo '//je mets de boutons cela pourais etre ton premier champs liste';
echo'<a href="#" onClick='."javascript:see(arr1[0]);".' >voir 1</a><br/>';
echo'<a href="#" onClick='."javascript:see(arr1[1]);".' >voir 2</a><br/>';
echo'<a href="#" onClick='."javascript:see(arr1[2]);".' >voir 3</a><br/>';
echo'<a href="#" onClick='."javascript:see(arr2[0]);".' >voir 4</a><br/>';
echo'<a href="#" onClick='."javascript:see(arr2[1]);".' >voir 5</a><br/>';
echo'<a href="#" onClick='."javascript:see(arr2[2]);".' >voir 6</a><br/>';
 
echo'<div id="ct"</div>//';
?>

cette solution à l'inconveniant si ta ta table à un miller d'entrées, d'avoir à tous stoker lors de l'affichage de la page, cependant si cela ne représente qu'une centaine de valeurs cela devrai fonctionner, et sinon pas le choix c AJAX