Discussion :

[french-petzouille]

bonjour

soit une <table> qui comporte 3 lignes ( en réel > 500 )
sur chaque ligne <tr> j'ai :
2 <td>
- le premier contient toujours la même liste déroulante <select class="matiere"> avec une liste d'éléments.
- le 2eme est un <td class="spe"> qui contient du texte.

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
<table>
<tr>
<td>
<select name="spe_med" class="matiere"> 
<option value="356">Anatomie </option>
<option value="335">Anesthésie et réanimation chirurgicale</option>
<option value="373">Aucune</option>
<option value="337">Chirurgie générale</option>
<option value="359">Chirurgie infantile</option>
<option value="360">Chirurgie maxillo faciale</option>
</select>
</td>
<td class="spe">ANAT</td>
</tr>
 
<tr>
<td>
<select name="spe_med" class="matiere"> 
<option value="356">Anatomie </option>
<option value="335">Anesthésie et réanimation chirurgicale</option>
<option value="373">Aucune</option>
<option value="337">Chirurgie générale</option>
<option value="359">Chirurgie infantile</option>
<option value="360">Chirurgie maxillo faciale</option>
</select>
</td>
<td class="spe">PEDIATRIE</td>
</tr>
 
<tr>
<td>
<select name="spe_med" class="matiere"> 
<option value="356">Anatomie </option>
<option value="335">Anesthésie et réanimation chirurgicale</option>
<option value="373">Aucune</option>
<option value="337">Chirurgie générale</option>
<option value="359">Chirurgie infantile</option>
<option value="360">Chirurgie maxillo faciale</option>
</select>
</td>
<td class="spe">ANAT</td>
</tr>

mon but = établir des correspondances automatiquement :

La sélection d' une option de la liste déroulante n°1 ... par exemple l'option : Anatomie (de value="356") ... qui est sur la même ligne que "ANAT" ...
doit mettre tous les autres listes déroulantes qui sont sur une ligne qui contient aussi "ANAT" avec la valeur 356.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	$('. matiere').change(function(){
	    var id= $(this).val();      // valeur retenue
	    var speCSV=$(this).parent('td').next('td.spe').html();  // texte de la cellule suivante du tableau 
 
              $('td.spe').each(function(i){
               // console.log( "#"+id+"->"+i + ": " + $(this).html());
               if($(this).html()==speCSV) {  $(this).prev('.matiere').val(id);}
              });	    
	});

exemple =
je prend la ligne "Anatomie" de la liste déroulante n°1
je ne parviens pas à forcer la 3eme liste déroulante à prendre la valeur 356 de la première puisque la 3eme liste est elle aussi suivie par une cellule qui contient le même texte : "ANAT".

une aide me serait précieuse.

PS : je flaire la cagouille avec le bon sélecteur du champ précédent le champ texte : $(this).prev('.matiere').val(id) ???

Mouchas gracias

[NoSmoking]

Bonjour,
il te faut simplifier ton approche et ce dès l'initialisation si tu ne souhaites pas modifier le HTML.

Tu pourrais par exemple affecter un attribut data-sep ce qui te permettrais de l'utiliser pour cibler les bons <select>.

Code :

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

1
2
3
4
5
6
7
8
9
$('.matiere').each(function() {
  const $obj = $(this);
  // récup. spécialité
  const spe = $obj.parent().next().text();
  // garde info pour la suite
  $obj.attr("data-spe", spe);
  // affecte l'événement
  $obj.on("change", updateSelect);
});

Ta fonction updateSelect pourrait dans ce cas ressembler à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function updateSelect() {
  const $obj = $(this);
  // récup. valeur
  const valeur = $obj.val();
  // récup. spécialité
  const spe = $obj.attr("data-spe");
  // get les options identiques
  const $elemsOption = $('[data-spe="' + spe + '"] [value="' + valeur + '"]');
  // sélectionne chaque option
  $elemsOption.each(function() {
    $(this).parent().val(valeur);
  });
}

[french-petzouille]

merci ++
C'est bien ton truc. j'adopte.


sinon :

Code :

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

$(this).prev('td').children('select.matiere').val(id);

fonctionne aussi.

[NoSmoking]

La fonction présentée ci-dessus est un peu trop inutilement capillotractée, manque de caféine ce matin,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function updateSelect() {
  const $obj = $(this);
  // récup. valeur
  const valeur = $obj.val();
  // récup. spécialité
  const spe = $obj.attr("data-spe");
  // get les selects identiques
  const $elemsSelect = $('[data-spe="' + spe + '"]');
  // sélectionne chaque option
  $elemsSelect.each(function() {
    $(this).val(valeur);
  });
}

cela me paraît plus propre !