comment faire pour deux Selects dépendantes
Bonjour,
j'utilise dans mon projet Spring boot, thymeleaf et bootstrap
comment faire pour lier deux select dans mon formulaire de saisie?
liste des gouvernorats à partir de la table "Gouvernorats" et une liste des localites à partir de la table "Localites"
la table "Localites" a un FK codeGouvernorat
dans mon formulaire je veux afficher la liste des localites de la gouvernorat sélectionnée
qq peux m'aider a resoudre mon problème en me communiquant la source
MERCI,
Bout de code de résolution problème
Bonjour,
Je vous annonce que j'ai trouvé la solution de mon besoin,
Au fait c'est avec HTML et Jquery.
au niveau de la page html insérer les lignes :
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
| <meta charset="UTF-8"/>
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
</head>
<body>
...
<label for="gouvernorats">Gouvernorat</label>
<select id="gouvernorat" name="gouvernorat" class="form-control form-control-sm" title="Choisir gouvernorat">
<option value="">Choisir gouvernorat...</option>
<option th:each="g:${listeGouvernorats}" th:value="${g.codeGouvernorat}" th:text="${g.libelleGouvernorat}" th:selected="${codeGouvernorat==g.codeGouvernorat}">Wireframe</option>
</select>
<select th:field="*{localite}" id="localite" name="localite" class="form-control form-control-sm" title="Choisir localité...">
<option value="">Choisir localité...</option>
<option th:each="l:${listeLocalites}" th:id="${l.gouvernorat.codeGouvernorat}" th:value="${l.codePostal}" th:text="${l.gouvernorat.libelleGouvernorat} + ' | ' + ${l.libelleLocalite}" data-chained="11">Wireframe</option>
</select>
...
<script type="text/javascript">
$('#localite').change(function() {
document.getElementById('codePostal').value = document.getElementById('localite').value;
});
$( document ).ready(function() {
$('#localite').prop('disabled', true);
});
$('#gouvernorat').change(function() {
$('#localite option').hide();
$('#localite option[id="' + $(this).val() + '"]').show();
// add this code to select 1'st of streets automaticaly
// when city changed
if ($('#localite option[id="' + $(this).val() + '"]').length) {
$('#localite option[id="' + $(this).val() + '"]').first().prop('selected', true);
$('#localite').prop('disabled', false);
}
// in case if there's no corresponding street:
// reset select element
else {
//alert("B");
$('#localite').val('Pas de localite');
$('#localite').prop('disabled', true);
};
});
</script>
</body> |
au niveau du controller :
Code:
1
2
3
4
5
6
7
8
| ...
List<Campagnes> listeCampagnes = paramGenMetier.listeCampagnesActive();
model.addAttribute("listeCampagnes", listeCampagnes);
Parcelles parcelle=parcellesMetier.consulterParcelle(codeParcelle);
model.addAttribute("parcelle", parcelle);
... |
