Hi.
I have a problem with select2.
Has you can see in my image, it’s seems like there is 2 select (but I have only 1 on my code).
Here is my code:
{% extends 'base.html.twig' %}
{% block title %}Mini-stage{% endblock %}
{% block main %}
{# Inclure les fichiers CSS et JS de Select2 #}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<section class="job_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto">
<div class="profile-container">
<!-- Formulaire pour les Infos Établissement -->
<div class="tab-content" id="classe-info">
<div class="form-container">
<h2>Informations de la classe</h2>
<form action="" method="post">
<div class="form-group">
<label for="diplome">Sélection de la filière:</label>
<select id="diplome" class="diplomes">
<option value="">{{unType.nom}} {{unDiplome.nom}}</option>
{% for diplome in diplomes %}
<option value={{diplome.idDip}}>{{diplome.nomType}} {{diplome.nomDip}}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="stage-description">Description :</label>
<textarea id="stage-description" name="stage-description" rows="4" cols="50"></textarea>
</div>
<div class="form-group">
<button type="submit" onclick="showTab('classe-list')">Enregistrer</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{# Script JavaScript pour initialiser Select2 #}
<script>
$(document).ready(function() {
$('.diplomes').select2();
});
</script>
{% endblock %}