[4.x] comment faire un select de select ?

Bonjour,

Cela ressemble à des listes liées et pour faire ça bien, le mieux est d'utiliser Ajax. Ci-joint le code de deux fichiers (à mettre au même niveau dans ton répertoire) pour faire un test. C'est un code assez générique, tu devrais facilement pouvoir l'adapter à tes besoins. Durant le test et tant que tu n'a pas adapté "Destination de la requête Ajax" dans le premier fichier contenant le formulaire et le code javascript, il est important que le code Php de destination de la requête Ajax soit dans un fichier nommé "listes_liees_generique_ajax.php". Les commentaires sont dans le code.

Formulaire et code javascript :

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
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?php
session_start();
 
// Requête pour le premier select
//...
$results = ['France','Angleterre'];
 
// Défini un token. On utilise de préférence random_bytes si la version php le permet
$token = function_exists('random_bytes') ? bin2hex(random_bytes(24)) : bin2hex(openssl_random_pseudo_bytes(24));
$_SESSION['token_listes'] = [];
$_SESSION['token_listes'][$token]['token'] = 1;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax/Jquery</title>
<style>
body {
        font-family:Verdana, Geneva, sans-serif;
}
 
#select_multiple select {
        width:200px;
}
</style>
</head>
<body>
<div>
<form id="select_multiple">
    <label>Pays:</label>
    <select name="pays">
    <option value="">Sélectionnez le pays</option>
    <?php
    foreach($results as $pays) {
    ?><option value="<?=$pays?>"><?=$pays?></option>
	<?php }?> 
    </select>
 
    <!-- par défaut tous les select suivant le premier sont disabled -->
    <label>Régions:</label>
    <select name="regions" disabled>
    <option value="">Sélectionnez la région</option>
    </select>
 
    <label>Villes:</label>
    <select name="villes" disabled>
    <option value="">Sélectionnez la ville</option>
    </select>
 
    <input name="token" value="<?=$token?>" type="hidden">
</form>
<div id="resultat">
</div>
<script>
const
        form = document.getElementById("select_multiple")
        ,selecteurs = form.querySelectorAll("select")
        ,selecteursLength = selecteurs.length
        ,resultat = document.getElementById("resultat")
        ,root = window.location.origin
        ;
 
 
function handleChange(cibleselect) {
        var xhr = new XMLHttpRequest();
 
        // Retour de la requête Ajax
         xhr.onreadystatechange = function(){
 
                if (xhr.readyState == 4 && xhr.status == 200){
                        //console.log(xhr.responseText);
                        
                        // Si cibleselect n'est pas vide, on remet le prochain sélecteur enable et on rempli ses options avec le retour de la requête ajax
                        if (cibleselect) { 
                                cibleselect.disabled = false;
                                cibleselect.innerHTML = xhr.responseText;
                        }
                        else {
                                // Sinon on affiche le résultat
                                resultat.innerHTML = xhr.responseText;
                        }
                        
                }
        }
 
        // Destination de la requête Ajax
        xhr.open('POST', root+'/listes_liees_generique_ajax.php', true);
 
        // Récupération des données du formulaire
        var data = new FormData(form);
 
       // Envoi de la requête Ajax 
       xhr.send(data);
}
 
if (selecteursLength){
        selecteurs.forEach(function(curSel, index){
                // Défini un évènement onchange sur les sélecteurs
                curSel.addEventListener('change', function(e){
                        
                        // Vide le div de résultat
                        resultat.innerHTML = '';
                                                
                        var cibleselect
                        ,nextselect
                        ,nextoptions
                        ;
                        selecteurs.forEach(function(sel, i){
                                
                                //console.log(curSel.isSameNode(sel));
                                /* Si le select (sel) contenu dans la liste des selecteurs correspond au sélecteur utilisé (curSel),
                                cherche le prochain sélecteur s'il existe et on défini cibleselect
                                */
                                
                                nextselect = selecteurs[i+1];
                                
                                if(curSel.isSameNode(sel) && nextselect != undefined) {cibleselect = nextselect;}
                                
                                // Formate les prochains sélecteurs avec disabled et sélectionne la première option
                                if (cibleselect && nextselect != undefined) {
                                        nextselect.disabled = true;
                                        nextoptions = nextselect.getElementsByTagName('option');
                                        if(nextoptions.length) {
                                                nextoptions[0].selected = 'selected';
                                        }
                                }
                        })
                        
                        // Si une option est sélectionnée, envoie la requête ajax
                        if(curSel.selectedIndex > 0) {
                                handleChange(cibleselect);
                        }
 
                }, false );
        });
}
</script>
</body>
</html>

Code php destination de la requête Ajax, nommé ici "listes_liees_generique_ajax.php" :

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
53
54
55
56
57
58
59
60
61
<?php
session_start();
 
// exit(var_dump($_POST));
 
$token = isset($_POST['token']) ? $_POST['token'] : null;
if(!isset($_SESSION['token_listes'][$token]['token'])) exit('token invalide');
 
$pays = isset($_POST['pays']) ? trim($_POST['pays']) : null;
$region = isset($_POST['regions']) ? trim($_POST['regions']) : null;
$ville = isset($_POST['villes']) ? trim($_POST['villes']) : null;
 
// array_filter sans argument supprime les valeurs vide ou nulles
$selects = array_filter([$pays,$region,$ville]);
 
if(isset($pays) && count($selects) == 1)
{
	// Requête select avec la variable $pays pour trouver les régions et construire les options	
	// Je fais un équivalent avec un if et je fais le choix ici de retourner directement du html
	if($pays == 'France')
	{
	?>
        <option value="">Sélectionnez la région</option>
        <option value = "Aquitaine" >Aquitaine</option>
        <option value = "Auvergne" >Auvergne</option>
    <?php }
	else if ($pays == 'Angleterre')
	{ ?>
        <option value="">Sélectionnez la région</option>
		<option value = "Angleterre du Sud-Est" >Angleterre du Sud-Est</option>
    	<option value = "Angleterre du Sud-Ouest" >Angleterre du Sud-Ouest</option>
	<?php }
	exit;
}
else if(isset($region) && count($selects) == 2)
{
	// Requête select avec les variables $pays et $region pour trouver les villes et construire les options
	// Je fais un equivalent avec un swicth pour retourner quelque chose
	$result = ''; 
	switch ($region)
	{
		case 'Aquitaine' : $result = '<option value="">Sélectionnez la ville</option><option value="Bordeaux">Bordeaux</option><option value="Pau">Pau</option>';
		break;
		case 'Auvergne' : $result = '<option value="">Sélectionnez la ville</option><option value="Clermont-Ferrand">Clermont-Ferrand</option><option value="Moulin">Moulin</option>';
		break;
		case 'Angleterre du Sud-Est' : $result = '<option value="">Sélectionnez la ville</option><option value="Southampton">Southampton</option><option value="Portsmouth">Portsmouth</option>';
		break;
		case 'Angleterre du Sud-Ouest' : $result = '<option value="">Sélectionnez la ville</option><option value="Bristol">Bristol</option><option value="Plymouth">Plymouth</option>';
		break;
	}
	// Je retourne le html dans le exit
	exit($result);
}
else if(isset($ville) && count($selects) == 3)
{
	// Requête select avec les variables $pays, $region et $ville pour retourner ce que l'on veut
 
	$result = '<p style="font-size:2em;color:green;">Vous avez sélectionné '.$ville.' et c\'est très bien</p>';
	exit($result);
}
?>