2 pièce(s) jointe(s)
Dropdown multi select Select2 avec Angular
Bonjour à tous,
Je développe un site en Angular 12 avec Bootstrap 5.
Je souhaite insérer dans un formulaire, une dropdown multi select. J'ai donc trouvé ceci :
https://select2.org/getting-started/installation
J'ai d'abord testé la select box sur une simple page index. Le rendu (visuel) et le fonctionnement sont correspondants.
J'ai donc intégré la même select box dans mon formulair (projet angular) mais le rendu et le fonctionnement ne sont pas correcte Pièce jointe 604813
Alors qu'il devrait ressembler à ceci :
Pièce jointe 604815
J'ai vérifié dans la console si les fichiers js et css sont bien chargés et c'est le cas.
J'ai inversé l'ordre de chargement des fichiers js mais rien ne change.
Voici le code de la dropdown :
Code:
1
2
3
4
5
6
| <div class="container" [formGroup]="myForm">
<select class="form-control m-b js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div> |
Il s'agit d'un component que j'appel dans mon component formulaire.
Voici le code de ma page index :
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
| <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FoodTruckClient</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Select -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="assets/css/select2.css" rel="stylesheet" />
<script src="assets/js/select2.min.js"></script>
<!------ Select ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> -->
</head>
<body>
<!-- Bootstrap css -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<!-- Bootstrap Js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="countainer">
<app-root></app-root>
</div>
<script type="text/javascript">
$(document).ready(function() {
console.log('Ready');
$('.js-example-basic-multiple').select2();
});
$('select').select2({
theme: 'bootstrap5',
});
console.log('bootstrap');
</script>
</body>
</html> |
A noter que j'ai essayé le même code dans un projet à part (une simple page html) et cela fonctionne.
Quelqu'un aurait une idée?
Merci
