[PostgreSQL] Liste déroulante PHP/postgres/javascript

Bonjour tout le monde,
Je suis en train de développer une application web géostatistique, j'ai créé un formulaire ExtJS avec une liste déroulante pour chaque ligne du formulaire, pour accéder le visiteur du site choisie le "domaine", puis le "thème" puis "l'indicateur"... et il finie par le bouton "valider" pour lui montrer un tableau ou un graphique.
J'ai 18 domaines de statistique, et chaque domaine possède plusieurs indicateurs, comment faire pour que lorsque le visiteur choisie un "thème" la liste déroulante ne lui affiche que les thèmes appartenant au "domaine" qui est déjà choisie? quelle est la méthode ??
Voici le script php qui appelle la liste des domaines:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
// Connexion, sélection de la base de données
$dbconn = pg_connect("host=localhost dbname=Achref_INS user=postgres password=XXXXX")
    or die('Connexion impossible : ' . pg_last_error());
 
$sql = 'SELECT nom_domaine_fr  FROM domaine ORDER BY id_domaine ASC';
$result = pg_query($sql) or die('Échec requête : ' . pg_last_error()); 
while ($row = pg_fetch_object($result)) {
$json_rows[] = $row;
}
$header = '{ rows: ';
$footer = '}';
echo $header . json_encode($json_rows) . $footer;
 
// Libère le resultset
pg_free_result($result);
 
// Ferme la connexion
pg_close($dbconn);
?>

au niveau du code JS:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var domaineStore = new Ext.data.JsonStore({
url : 'http://localhost/MonTP/Appli_stage/Domaine.php',
fields : ['nom_domaine_fr'],
root : 'rows',
autoLoad : true
});
 
		var themeStore = new Ext.data.JsonStore({
url : 'http://localhost/MonTP/Appli_stage/theme.php',
fields : ['nom_theme_fr'],
root : 'rows',
autoLoad : true
});
var domaineCombo = new Ext.form.ComboBox({
id : 'domaineCombo',
fieldLabel : "Liste des domaines",
triggerAction : 'all',
emptyText : "Choisir un domaine",
editable : false,
store : domaineStore,
mode : 'local',
valueField : 'nom_domaine_fr',
displayField : 'nom_domaine_fr'
});
 
	var themeCombo = new Ext.form.ComboBox({
id : 'themeCombo',
fieldLabel : " Liste des themes",
triggerAction : 'all',
emptyText : "Choisir un theme",
editable : false,
store : themeStore,
mode : 'local',
valueField : 'nom_theme_fr',
displayField : 'nom_theme_fr'
});
var dr = new Ext.FormPanel({
      labelWidth: 130,
	  height    : 462,
      frame: true,
	  lineHeight: 3,
	  labelAlign : 'left',
	  collapsible: true,
      autoScroll: true,
      bodyStyle : {
      padding: '0px',
	  height:'5px'
      },
      title: 'Remplissez le formulaire',
	  buttons : [submitButton, submitButton1, submitButton2],
      items: [domaineCombo, themeCombo, indicateurCombo, gouvernoratCombo, delegationCombo, secteurCombo]
    });

Merci pour votre aide ;)