Discussion :

[renaud26]

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]

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]

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]

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

[renaud26]

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]

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

• Suppression d'une option déjà choisie
• Suppression des options déjà choisies

[Toufik83]

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("");
	}
  });
});

[renaud26]

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

• Suppression d'une option déjà choisie
• Suppression des options déjà choisies

Bonjour et merci, je cherche comment adapter ton script au mien. Pas si simple

[renaud26]

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("");
	}
  });
});

Bonjour et merci, c'est une bonne piste ! Cependant, si cela fonctionne avec le 1er et second select, ça ne le fait plus pour le 3ème où les champs précédemment sélectionnés ne sont plus disabled. Or il peut y avoir jusqu'à 11 champs, selon le fichier CSV chargé par le user. Voici le script adapté avec mes classes :

Code :

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

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

Tu as une idée ? D'avance merci.

[Toufik83]

Bonjour,

Il fallait nous monter toutes vos listes <select> pour adapter le code, car celui que j'ai posté gère seulement les <select> ayant la classe .set_column_data.

Est-ce que toutes les listes ont la classe .set_column_data ?

[renaud26]

Oui, mais j'ai adapté ton code à la classe de mes select. Voici les select. Comme tu le vois le data-column_number s'incrémente en fonction du nombre de select

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
53
<tr><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>
        <option value="dept" disabled="disabled">Département</option>
        <option value="ville">Ville</option>
        <option value="pays">Pays</option>
        <option value="email">Email</option>
        <option value="telephone">Téléphone</option>
        <option value="date_ajout">Date ajout</option>
        <option value="commentaire">Commentaire</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>
        <option value="dept" disabled="disabled">Département</option>
        <option value="ville">Ville</option>
        <option value="pays">Pays</option>
        <option value="email">Email</option>
        <option value="telephone">Téléphone</option>
        <option value="date_ajout">Date ajout</option>
        <option value="commentaire">Commentaire</option>
</select></th>
<th>
<select name="set_column_data" class="form-select form-control set_column_data" data-column_number="2">
	<option value="">Choix</option><option value="civilite">Civilite</option><option value="nom">Nom</option>
        <option value="prenom">Prenom</option>
        <option value="adresse">Adresse</option>
        <option value="dept" disabled="disabled">Département</option>
        <option value="ville">Ville</option>
        <option value="pays">Pays</option>
        <option value="email">Email</option>
        <option value="telephone">Téléphone</option>
        <option value="date_ajout">Date ajout</option>
        <option value="commentaire">Commentaire</option>
</select></th>
<th>
<select name="set_column_data" class="form-select form-control set_column_data" data-column_number="3">
	<option value="">Choix</option><option value="civilite">Civilite</option><option value="nom">Nom</option>
        <option value="prenom">Prenom</option>
        <option value="adresse">Adresse</option>
        <option value="dept" disabled="disabled">Département</option>
        <option value="ville">Ville</option>
        <option value="pays">Pays</option>
        <option value="email">Email</option>
        <option value="telephone">Téléphone</option>
        <option value="date_ajout">Date ajout</option>
        <option value="commentaire">Commentaire</option>
</select></th>
etc...etc...

[NoSmoking]

Bonjour et merci, je cherche comment adapter ton script au mien. Pas si simple

Je pars sur la base de : Suppression des options déjà choisies

le HTML se résume à :

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
  <th>
    <select name="set_column_data" class="form-select form-control set_column_data" data-column_number="0">
      <option value="civilite">Civilite</option>
      <option value="nom">Nom</option>
      <option value="prenom">Prenom</option>
      <option value="adresse">Adresse</option>
      <option value="dept" disabled="disabled">Département</option>
      <option value="ville">Ville</option>
      <option value="pays">Pays</option>
      <option value="email">Email</option>
      <option value="telephone">Téléphone</option>
      <option value="date_ajout">Date ajout</option>
      <option value="commentaire">Commentaire</option>
    </select>
  </th>
  <th>
    <select name="set_column_data" class="form-select form-control set_column_data" data-column_number="1">
    </select>
  </th>
  <th>
    <select name="set_column_data" class="form-select form-control set_column_data" data-column_number="2">
    </select>
  </th>
  <th>
    <select name="set_column_data" class="form-select form-control set_column_data" data-column_number="3">
    </select>
  </th>
  <th>
    <select name="set_column_data" class="form-select form-control set_column_data" data-column_number="4">
    </select>
  </th>
  <th>
    <select name="set_column_data" class="form-select form-control set_column_data" data-column_number="5">
    </select>
  </th>
  <th>
    <select name="set_column_data" class="form-select form-control set_column_data" data-column_number="6">
    </select>
  </th>

... seul le premier <select> est renseigné, sans l'option choix qui est ajoutée automatiquement. Tu peux en mettre autant que tu veux il faut que cela reste toutefois cohérent

Le code JavaScript, adapté à ton exemple, est pour ainsi dire le même la plus grosse modification étant le changement de sélecteur.

Code :

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

const villesSelects = document.querySelectorAll(".group-villes");

devenant

Code :

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

const allSelects = document.querySelectorAll("[name='set_column_data']");

Je le remet en entier :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
"use strict";
const CHOIX = 1;
function updateSelect(oSrce, oDest) {
  // récup. SELECT dest
  const destValue = oDest.value;
  // get selection oSrce
  const ind = oSrce.selectedIndex;
  // vide le SELECT dest
  oDest.options.length = CHOIX;
  // création des options
  let i, nb = oSrce.options.length;
  let oOption;
  for (i = CHOIX; i < nb; i += 1) {
    if (i !== ind) {
      // création de l'option méthode par clonage
      oOption = oSrce.options[i].cloneNode(true);
      // replace la selection
      if (oOption.value === destValue) {
        oOption.selected = true;
      }
      // ajout <option>
      oDest.add(oOption);
    }
  }
}
 
function upDateAllSelects(srce, liste, focus) {
  const index = [...liste].indexOf(srce);
  if (index > -1) {
    const nb = liste.length - 1;
    // fait l'upDate jusqu'à la fin de la liste
    for (let ind = index; ind < nb; ind += 1) {
      updateSelect(liste[ind], liste[ind + 1]);
    }
    // change focus si pas initialisation
    if (focus) {
      liste[(index + 1) % liste.length].focus();
    }
  }
}
 
const allSelects = document.querySelectorAll("[name='set_column_data']");
allSelects.forEach((select) => {
  // ajout option de choix si requise
  if(CHOIX) {
    select.insertAdjacentHTML("afterbegin", "<option value='' selected>Choix");
  }
  // affecte événement
  select.addEventListener("change", (e) => {
    upDateAllSelects(e.target, allSelects, true);
  });
});
// init des selects
upDateAllSelects(allSelects[0], allSelects);

[renaud26]

En premier lieu, merci pour le temps que tu passes pour m'aider. C'est sympa.

Je vais tester. Mon problème est la boucle PHP qui, via ajax, renvoie le nombre adéquat de selects avec toutes leurs options...alors que ton script demande à ce que le seul soit garni d'options...

[renaud26]

Je pars sur la base de : Suppression des options déjà choisies

Alors...les select vides se remplissent bien avec les options du 1er : nickel.
Par contre, rien n'empêche de sélectionner la même option dans tous les select...
J'ai raté qq chose ?

[NoSmoking]

renvoie le nombre adéquat de selects avec toutes leurs options...

dans ton cas donc il ne te faut pas initialiser les <select>.

La partie de code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const allSelects = document.querySelectorAll("[name='set_column_data']");
allSelects.forEach((select) => {
  // ajout option de choix si requise
  if(CHOIX) {
    select.insertAdjacentHTML("afterbegin", "<option value='' selected>Choix");
  }
  // affecte événement
  select.addEventListener("change", (e) => {
    upDateAllSelects(e.target, allSelects, true);
  });
});
// init des selects
upDateAllSelects(allSelects[0], allSelects);

devient simplement :

Code :

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

1
2
3
4
5
6
7
const allSelects = document.querySelectorAll("[name='set_column_data']");
allSelects.forEach((select) => {
  // affecte événement
  select.addEventListener("change", (e) => {
    upDateAllSelects(e.target, allSelects, true);
  });
});

Par contre, rien n'empêche de sélectionner la même option dans tous les select...

Au départ tous les choix sont possibles dans tous les <select>, dès qu'une <option> est sélectionnée elle est supprimée de tous les <select> qui suivent.

[renaud26]

La modif ne change rien...mais j'ai mis un console.log ici :

Code :

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

1
2
3
4
5
6
7
8
		const allSelects = document.querySelectorAll("[name='set_column_data']");
		allSelects.forEach((select) => {
		  // affecte événement
		    select.addEventListener("change", (e) => {
			  console.log('change');
			upDateAllSelects(e.target, allSelects, true);
		  });
		});

...mais le log ne sort pas. Je précise que l'ensemble de ton code est encapsulé dans un jQuery(document).ready(function($) {})

En fait toutes les options sont présentes dans tous les select, ce qui est normal, mais le fait d'en sélectionner une dans le 1er ne la supprime pas des autres.

Voici le code PHP qui génère les select :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
			for($count=0; $count < count($file_header); $count++){
				$html .= '<th>
				<select name="set_column_data" class="form-select form-control set_column_data" data-column_number = "'.$count.'">';
 
				if($count == 0)
					//$html .= '<option value="">Choix</option>';
					foreach($array_fields as $value=>$etiquette){
 
						$html .= '<option value="'.$value.'">'.$etiquette.'</option>';
					}
 
				$html .= '</select></th>';
			}

la var $file_header est issue de la lecture de l'entête du fichier csv/excel soumis.

[renaud26]

Il y a un problème avec const allSelects = document.querySelectorAll("[name='set_column_data']");
Parce qu'un console.log retourne un tableau de length 0

[NoSmoking]

avec la modif, les autres select sont vides

cela me semble normal, tu ne les remplis pas côté serveur à cause de ton : if($count == 0) !

Si tu souhaites ne pas les remplir côté serveur il te faut conserver le premier code fourni avec notamment :

Code :

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

1
2
// init des selects
upDateAllSelects(allSelects[0], allSelects);

qui s'en chargera.

[renaud26]

Alors je t'ai mal compris ! Parce que j'ai cru qu'il ne fallait remplir que le 1er, d'où mon if count == 1
Aucun problème pour les remplir côté serveur, il suffit que j'enlève mon if

EDIT : le if enlevé, les select sont tous OK, évidemment, mais le fait de select une option dans le 1 ne l'enlève pas dans le 2

[Toufik83]

Bonjour,

Voici le script adapté avec 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
$(".set_column_data").on('change', function() {
  let values=$('.set_column_data')
	.map((i,s)=>{
	if($(s).val()!="")
	     return $(s).val();
	}).get();
 
  $('.set_column_data option').removeAttr('disabled')
  .parent().each((i,select)=>{
        if(!$(select).is(this))
	    values.map(v=>{
		$(select).find('option[value="'+v+'"]').attr('disabled','disabled');
	    });
  });
});

Notez que le code doit être dans un contexte $(document).ready() ou $(function(){})