Multiple selects : empêcher la sélection si option déjà sélectionnée dans un autre select

**renaud26** · 19/01/2023, 08h40

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

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

**mathieu** · 19/01/2023, 11h17

si vous utilisez du javascript, vous pouvez présenter le réglages de l'ordre des champs avec du glisser-déposer comme cela :
https://jqueryui.com/sortable/#placeholder

**renaud26** · 19/01/2023, 11h26

Bonjour,

Le fait d'utiliser des glisser-déposer à la place de select ne changera sans doute pas le problème que la même valeur ne peut être sélectionnée qu'une fois dans les différentes colonnes. Ou alors je ne vois pas comment. J'ai plutôt un problème de réinitialisation de mon Array où je dois supprimer une valeur qui vient d'être sélectionnée alors qu'elle était déjà présente dans le tableau.

**SpaceFrog** · 19/01/2023, 11h46

On peut imaginer sur le onchange mettre les valuers sélectionnées dans de clefs d'array littéral ... puis tester leur existence ...

**renaud26** · 19/01/2023, 12h05

Hello et merci de te pencher sur ce post,

Tu peux me mettre un bout de code en exemple pour le tableau littéral ?

**NoSmoking** · 19/01/2023, 12h06

Bonjour,
on a déjà abordé ce sujet sur le forum, à voir donc :

**Toufik83** · 19/01/2023, 12h57

Bonjour,

Vous pouvez essayer ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(".set_column_data").on('change', function() {
  let value=$(this).val();
  $('.set_column_data option').removeAttr('disabled');
  $(".set_column_data").not(this)
    .each(function(){
	if(value!=""){
             $(this).find('option[value="' + value + '"]').attr('disabled', "disabled");
	     if($(this).val()==value)
		 $(this).val("");
	}
  });
});