Multiple selects : empêcher la sélection si option déjà sélectionnée dans un autre select
Bonjour à tous,
Afin d'importer les données d'un csv dans une table SQL, je fais un mapping des champs pour les faire correspondre avec des entêtes de colonne.
Côté HTML voici la sortie :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <th>
<select name="set_column_data" class="form-select form-control set_column_data" data-column_number="0">
<option value="">Choix</option>
<option value="civilite">Civilite</option>
<option value="nom">Nom</option>
<option value="prenom">Prenom</option>
<option value="adresse">Adresse</option>
</select>
</th>
<th>
<select name="set_column_data" class="form-select form-control set_column_data" data-column_number="1">
<option value="">Choix</option>
<option value="civilite">Civilite</option>
<option value="nom">Nom</option>
<option value="prenom">Prenom</option>
<option value="adresse">Adresse</option>
</select>
</th>
...etc |
L'idée est que si le user a déjà sélectionné "civilité" dans la colonne 1, il ne puisse pas sélectionner la même option dans une autre. Bref sur les 4 colonnes, chaque choix doit être unique.
Côté Jquery :
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
| var civilite = 0;
var prenom = 0;
var nom = 0;
var adresse = 0;
var column_data = [];
$(document).on('change','.form-control', function(){
var column_name = $(this).val();
var column_number = $(this).data('column_number');
if(column_name in column_data)
{
alert('Tu as déjà défini la colonne '+column_name);
$(this).val('');
return false;
}
if(column_name != '')
{
column_data[column_name] = column_number;
}
else
{
const entries = Object.entries(column_data);
for(const [key, value] of entries)
{
if(value == column_number)
{
delete column_data[key];
}
}
}
}); |
L'alerte "Tu as déjà sélectionné..." se déclenche bien si on sélectionne 2 fois la même option mais il est impossible de re sélectionner une colonne si elle a déjà été sélectionnée par erreur puis changée. Comme si l'option n'était pas supprimée du tableau column_data.
Je tourne en rond depuis des heures sans trouver la solution.
Merci de votre aide et belle journée.
