comment faire pour deux Selects dépendantes

**osman.amine** · 18/08/2020, 09h42

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,

**osman.amine** · 20/08/2020, 13h01

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
...

comment faire pour deux Selects dépendantes

Spring Boot Java

Discussions similaires

Partager

Partager