Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2007
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2007
    Messages : 75
    Points : 39
    Points
    39

    Par défaut jQuery : donner une valeur à des select

    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 705
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 705
    Points : 33 331
    Points
    33 331

    Par défaut

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

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2007
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2007
    Messages : 75
    Points : 39
    Points
    39

    Par défaut

    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.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 705
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 705
    Points : 33 331
    Points
    33 331

    Par défaut

    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 !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Donner une valeur à à la selection d'une liste déroulante
    Par NouveauDev dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/02/2018, 22h49
  2. Réponses: 1
    Dernier message: 20/05/2011, 11h35
  3. [Etat]donner une valeur à un champs par le code
    Par guigui5931 dans le forum IHM
    Réponses: 6
    Dernier message: 04/07/2006, 12h11
  4. donner une valeur par defaut à un champ file
    Par Davboc dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 24/02/2006, 11h26
  5. Réponses: 2
    Dernier message: 07/07/2005, 18h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo