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
| <?php
session_start();
// Requête pour le premier select
//...
$results = ['France','Angleterre'];
// 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'][$token]['token'] = 1;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listes liées Ajax/Jquery</title>
<style>
body {
font-family:Verdana, Geneva, sans-serif
}
</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>
<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 src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function()
{
var form = $('#select_multiple')
,selecteurs = form.find('select')
,token = form.find('input[name=token]')
,resultat = $("#resultat");
// Syntaxe pour créer des évènements délégués
form.on("change", 'select', function() {
// Vide le div des résultats
resultat.empty();
// Variables que l'on passera dans la requête ajax
var selection = {};
selection.selecteur = $(this).attr('name');
selection.option = $(this).val();
selection.token = token.val();
// Pour avoir un code générique indépendant de variables internes
var that = $(this)
,cible
,nextselect;
selecteurs.each(function (i, e) {
/* Si le select ($(this)) contenu dans la liste des selecteurs correspond au sélecteur utilisé (that), trouve le prochain sélecteur
et si c'est le dernier on change de cible pour afficher le contenu dans le div "resultat" au retour de la requête ajax
*/
nextselect = selecteurs[i+1];
if($(this).is(that)) cible = nextselect != undefined ? nextselect : resultat;
/* Si cible est défini c'est que l'on est (ou que l'on a passé) le select en cours, on selectionne la première option pour les
sélecteurs suivants et on les met en disable sinon on pourrait avoir des affichages incohérents en cas de sélections successives.
*/
if (cible && nextselect != undefined) {
$(nextselect).find('option').first().prop('selected', true);
$(nextselect).prop('disabled',true);
}
})
if(selection.option != '') createSelect(cible, selection);
})
function createSelect(cible, selection){
$.ajax({
method: "POST",
// Destination de la requête ajax
url: "listes_liees_ajax.php",
data: selection
})
.done(function(result) {
// Met le sélecteur enable
if (cible.tagName == 'SELECT') $(cible).prop('disabled',false);
// Affiche le résultat
$(cible).html(result);
});
}
});
</script>
</body>
</html> |
Envoyé par moimp
Répondre avec citation
Partager