jQuery : donner une valeur à des select

Version imprimable

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:

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:

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

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:

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:

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

18/05/2019, 10h04
french-petzouille

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

sinon :

Code:

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

fonctionne aussi.

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

Code:

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 !